html 将图片镂空,遮罩层镂空效果的多种实现方法

先看看效果

【 方法一：截图模拟实现 】

原理：先截一张相同位置的图片，创建一个遮罩层，然后把图片定位在相应的位置上。

优点：原理简单；兼容性好，可以兼容到IE6、IE7；可以同时实现镂空多个。

缺点：此方法只适合静止页面，不适合可以滚动的页面。也不适合页面内容会发生变换的页面。

代码如下：

.class1{

position: absolute;

width:100%;

height:100%;

top: 0;

left: 0;

background-color: #000;

opacity: 0.6;

filter:alpha(opacity=60);

}

.class1 img{

position: absolute;

top:260px;

left: 208px;

}

【 方法二：CSS3阴影属性实现 】

原理：利用CSS3的阴影属性。

优点：实现方便