css在图片上遮罩层
导读：CSS在图片上遮罩层的效果非常炫酷。遮罩层可以增加图片的视觉效果，让图片更加生动有趣。今天，我们来学习一下如何在图片上添加遮罩层。首先，我们需要准备一张图片。这里我们选用了一张美丽的大海照片。<pre><img src="...
CSS在图片上遮罩层的效果非常炫酷。遮罩层可以增加图片的视觉效果，让图片更加生动有趣。今天，我们来学习一下如何在图片上添加遮罩层。首先，我们需要准备一张图片。这里我们选用了一张美丽的大海照片。
接下来，我们要在图片上添加一个遮罩层。这个遮罩层通常是半透明的，可以让图片的主体更加突出。
pre>
img src="sea.jpg" alt="海洋">
div class="mask">
img src="sea.jpg" alt="海洋">
/div>
我们使用标签来包裹图片，并给这个标签加上了一个class="mask"。接下来我们需要在CSS文件中添加以下代码：
```
.mask {
position: relative;
display: inline-block;
}
.mask:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
我们使用了CSS的:before伪元素来作为遮罩层。使用position属性将伪元素的位置设为绝对定位，使它能够在图片上层叠。我们使用rgba来定义一个半透明的黑色背景，并将z-index属性设为1，使伪元素在图片上方。
最后，我们可以看到美丽的大海照片被半透明的黑色遮罩层覆盖着，这样照片的主体就更加突出了。
CSS在图片上添加遮罩层是一种非常实用的技巧。通过将遮罩层用于图片，我们可以让图片的视觉效果更加丰富和生动。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css在图片上遮罩层
本文地址： https://pptw.com/jishu/569684.html