css图片如何加蓝色蒙层 |css3的动画背景

首先，大家需要创建一个包含图片的HTML元素：

<div class="image-container">
<img src="image.jpg" alt="图片">
</div>

接着，大家给这个HTML元素加上CSS样式：

.image-container {
position: relative;
}
.image-container::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 255, 0.5);
}

这段代码中，大家使用了伪元素::before来创建一个蓝色的蒙层。其中，content属性设置为空，display属性设置为block，使得蒙层能够显示出来。position属性设置为absolute，使得蒙层相对于父元素进行定位。top、left、width、height属性分别设置为0、0、100%、100%，使得蒙层覆盖整个父元素。background-color属性设置为rgba(0,0,255,0.5)，表示蒙层的背景色为蓝色，并且透明度为0.5。

最后，大家需要将图片设置为相对定位，并将z-index设置为2，使其覆盖在蒙层之上：

.image-container img {
position: relative;
z-index: 2;
}

现在，整个HTML元素就被加上了一个蓝色的蒙层，使得页面看起来更加美观和高端。