主要介绍了使用CSS实现中间镂空的图片遮罩效果的方法,文中同时附带介绍了一个用CSS3实现的镂空一个圆形的代码示例,需要的朋友可以参考下

前一阵子面试被问题到这个问题，突然懵逼了，脑子一片空白，以前知道这种效果，比如什么值得买的改版引导页面：   当时再紧张也应该打出一种实现方法，就是什么值得买这种使用图片实现   它首先加了一个半透明的黑色蒙层（ background-color: rgba(0,0,0,.8) ）然后添加提前制作好的图片作为子元素，然后通过决定定位，让图片与被遮盖的部分的定位相同，制造出一种假的镂空的效果 虽然这种方式处理定位有一些麻烦，并且不适合页面有滚动的情况，滚动的时候可能出现错位。 但是当时怎么也应该答

中间镂空的图片遮罩指的大概就是这样一个效果： 镂空一个洞的代码 CSS Code复制内容到剪贴板             <rect x=0 y=0 width=100% height=100% style=stroke:no