css如何给图片加蒙版

在网页设计中，图片是不可或缺的元素，而为图片添加蒙版则可以让页面更加丰富和美观。下面我们来看一下如何利用CSS来给图片添加蒙版。

    .image-container {
        position: relative;
    }
    .image-container:hover::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0,0.5); // 设置蒙版颜色
    }
    .image-container img {
        display: block;
        width: 100%;
        height: auto;
    }

首先，我们要给图片所在的容器设置相对定位。然后利用:hover伪类和::before伪元素来创建蒙版。在:hover状态下，我们使用::before伪元素覆盖在图片上，并设置其position为绝对定位，使其与图片重合。同时，利用background-color属性来设置蒙版的颜色，这里我们设置为rgba(0,0.5)，表示黑色半透明。

最后，我们要注意为图片也设置宽度为100%，让它充满整个容器，并保持高度自适应。完整代码如下：

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