使用CSS实现中间镂空的图片遮罩效果

时间：2021-05-08

中间镂空的图片遮罩指的大概就是这样一个效果：

镂空一个洞的代码
CSS Code复制内容到剪贴板

  • <divid="container"style="position:relative;margin:550px0050px;">
  • <svgstyle="position:absolute;"width="400"height="280">
  • <defs>
  • <maskid="mask3">
  • <rectx="0"y="0"width="100%"height="100%"style="stroke:none;fill:#ccc"></rect>
  • <circleid="circle1"cx="100"cy="100"r="50"style="fill:#000"/>
  • </mask>
  • </defs>
  • <rectx="0"y="0"width="100%"height="100%"style="stroke:none;fill:#ccc;mask:url(#mask3)"></rect>
  • </svg>
  • <imgsrc="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg"/>
  • </div>

    • 镂空多个洞的代码

    CSS Code复制内容到剪贴板
  • <divid="container"style="position:relative;">
  • <svgstyle="position:absolute;"width="400"height="280">
  • <defs>
  • <maskid="mask3">
  • <rectx="0"y="0"width="100%"height="100%"style="stroke:none;fill:#ccc"></rect>
  • <circleid="circle1"cx="100"cy="50"r="50"style="fill:#000"/>
  • <circleid="circle1"cx="300"cy="100"r="50"style="fill:#000"/>
  • <circleid="circle1"cx="100"cy="200"r="50"style="fill:#000"/>
  • </mask>
  • </defs>
  • <rectx="0"y="0"width="100%"height="100%"style="stroke:none;fill:#ccc;mask:url(#mask3)"></rect>
  • </svg>
  • <imgsrc="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg"/>
  • </div>

    • CSS3 版

    用 box-shadow ，代码如下：

    CSS Code复制内容到剪贴板
  • position:fixed;
  • left:150px;
  • top:35px;
  • width:100px;
  • height:100px;
  • border-radius:100px;
  • box-shadow:rgba(0,0,0,.8)0px0px0px2005px;
  • z-index:100;

    • 缺点是只能镂空一个洞。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章