css图片批量加遮罩

在Web开发中，常常需要对图片进行一些处理，如加边框、加阴影、加遮罩等。本文介绍如何使用CSS批量给图片加遮罩。

在CSS中，可以使用以下代码给图片添加遮罩：

img {
    position: relative;
}
img:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
img:hover:after {
    opacity: 1;
}
    

上述代码中，我们先设置图片为相对定位。

然后使用:after伪元素为图片添加遮罩。遮罩的内容为一个空字符串，位置为绝对定位，覆盖图片。背景使用rgba颜色，其中a代表透明度，设置为0.5，表示半透明。

初始时遮罩的不透明度为0，使用opacity属性设置。同时还设置了渐变效果，让遮罩的出现和消失更加平滑。

最后使用:hover选择器让遮罩在鼠标悬停在图片上时变为不透明。

现在我们来看一下如何批量给图片添加遮罩。使用以下HTML代码：

div class="img-wrapper">
    img src="image1.jpg">
    img src="image2.jpg">
    .../div>

在CSS中，我们需要将图片父元素的position设置为relative，这样遮罩的位置才能根据父元素定位。使用以下代码批量为图片添加遮罩：

.img-wrapper {
    position: relative;
}
.img-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}
.img-wrapper img:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.img-wrapper img:hover:after {
    opacity: 1;
}
    

上面的代码中，我们给所有图片的父元素添加了相对定位，设置了图片的宽度和高度，并将图片设置为块级元素。

然后给图片的:after伪元素添加遮罩，并设置初始的不透明度为0。

最后使用:hover选择器让遮罩在鼠标悬停在图片上时变为不透明。

以上就是使用CSS批量给图片添加遮罩的方法。通过设置父元素的位置和使用伪元素，我们可以快速实现这一效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！