摘要 今天小编跟大家讲解下有关使用CSS实现中间镂空的图片遮罩效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用CSS实现中

今天小编跟大家讲解下有关使用CSS实现中间镂空的图片遮罩效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用CSS实现中间镂空的图片遮罩效果 的相关资料，希望小伙伴们看了有所帮助。

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

镂空一个洞的代码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;

缺点是只能镂空一个洞。

来源：爱蒂网