使用CSS实现中间镂空的图片遮罩效果
2021-05-08 21:11:12 中间镂空的图片遮罩指的大概就是这样一个效果：
镂空一个洞的代码
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邮箱联系删除。
网站建设 IT知识 IT知识教程 使用CSS实现中间镂空的图片遮罩效果 
最新文章
热门文章
猜你喜欢
