聊代码（第九十集）css样式（之六十） 在本集里聊聊遮罩层，所谓遮罩层，就是一个图层，它要遮挡和笼罩下面的图层，既然说遮罩，那就意味着不同于覆盖，覆盖的概念是把下面的元素完全盖住，使之脱离我们的视线；遮罩则不然，它是不完全覆盖，是局部覆盖或使被覆盖元素糢糊可见。说得明白点，就是把一幅图片叠放在另一幅图片上，我们把上面的图片称作遮罩层，把下面的图片称作底层图片或称作背景图片。底层图片可以是 jpg 静态图片，gif 动态图片，还可以是 png 免抠透明图片。如果想获得糢糊背景，可以给其设置适当的透明度。至于遮罩层图片，也有三种选择：一是选用纯颜色，二是选用静态图片，这两者都需要设置透明度，使下面被遮罩的图片能被看到；三是选用透明免抠图片，大凡使用此类图片，是无须透明的。我的《行者音画集》里有好几个类似这样的遮罩，这些音画里面所用的都是实景遮罩。顺便说一下，这些遮罩是从我在公园拍的照片上抠取的，它的原图就是被它所遮罩的底层图片，所以，是看不出二图合一的痕迹的；另外，就是图案式的遮罩了，朋友们都可以自己制作，只要你会抠图，做什么样的遮罩，那就随心所欲了。看看下面的效果图吧。
她在丛中笑
代码：
＜style type="text/css"＞#底层图片{
position: absolute; top:1180px; left:363px; 底层图片绝对定位
z-index:1; 图层叠放顺序
width:640px; height:430px; 底层图片宽高
border:10px yellow double; 边框线的厚度、颜色、样式
background-image:url(http://img2.oldkids.cn/upload/260811000/u260810070/2016
/06/06/ blog_20160606140215016796.jpg);
opacity:1; 透明度
}
#遮罩层{
position:relative; top:10px; left:20px; 遮罩层相对定位
width:644px; height:430px; 遮罩层图片宽高
z-index:2; 图层叠放顺序
background-image:url(http://www.oldkids.cn/upload/2019/01/04/blog_
20190104220945922.jpg);
opacity:0.5;透明度
}
#文字{
position:relative; top:320px; left:50px; 文字相对定位
width:500px; height:30px; 文字移动范围
z-index:3; 图层叠放顺序
color:#fff; font-size: 30pt; 文字的颜色、大小
opacity:1; 透明度
}
＜/style＞
＜div id="底层图片"＞ ＜/div＞
＜div id="遮罩层"＞
＜div id="文字"＞＜marquee behavior="alternate" scrollamount="5" ＞＜b＞她在丛中笑＜/b＞ ＜/marquee＞＜/div＞
＜/div＞
代码解析：
代码中作了注释，不另赘述。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
