使用CSS实现中间镂空的图片遮罩效果
bokeyy 发布时间:2015-12-24 12:08:16 作者:袁源 我要评论
这篇文章主要介绍了使用CSS实现中间镂空的图片遮罩效果的方法,文中同时附带介绍了一个用CSS3实现的镂空一个圆形的代码示例,需要的朋友可以参考下
中间镂空的图片遮罩指的大概就是这样一个效果:
镂空一个洞的代码
CSS Code复制内容到剪贴板
- <div id="container" style="position: relative; margin: 550px 0 0 50px;">
- <svg style="position: absolute;" width="400" height="280">
- <defs>
- <mask id="mask3">
- <rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
- <circle id="circle1" cx="100" cy="100" r="50" style="fill: #000" />
- </mask>
- </defs>
- <rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: #ccc; mask: url(#mask3)"></rect>
- </svg>
- <img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />
- </div>
镂空多个洞的代码
CSS Code复制内容到剪贴板
- <div id="container" style="position: relative;">
- <svg style="position: absolute;" width="400" height="280">
- <defs>
- <mask id="mask3">
- <rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
- <circle id="circle1" cx="100" cy="50" r="50" style="fill: #000" />
- <circle id="circle1" cx="300" cy="100" r="50" style="fill: #000" />
- <circle id="circle1" cx="100" cy="200" r="50" style="fill: #000" />
- </mask>
- </defs>
- <rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: #ccc; mask: url(#mask3)"></rect>
- </svg>
- <img src="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) 0px 0px 0px 2005px;
- z-index: 100;
缺点是只能镂空一个洞。
相关文章
- 这篇文章主要介绍了CSS实现镂空遮罩效果,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-20
- 这篇文章主要介绍了用纯CSS实现镂空效果的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-02-25
- 这篇文章主要介绍了CSS实现镂空效果的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-12-24
- 这篇文章主要介绍了CSS中文字镂空、透明值、阴影效果设置示例小结,其中通过text-stroke-color透明值的设置可以让文字在某些程度上更加柔和,需要的朋友可以参考下2016-03-07
- 这篇文章主要介绍了CSS背景色镂空技术实际应用及进阶相关资料,需要的朋友可以参考下2013-10-10
- 这篇文章主要介绍了css3遮罩层镂空效果的多种实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2020-05-11
最新评论