css怎么为图片做遮罩

CSS是用来控制网页样式的一种技术。在网页中，图片是一个很重要的元素，很多时候我们需要给图片添加一些特效来提升网页的效果。其中，为图片添加遮罩效果是很常见的一种。

遮罩效果就是将一个图像的某些区域隐藏起来，只显示出我们想要的部分。比如，我们可以把一张图片的底部半透明，使其显示出柔和的效果。下面我们来看看具体如何实现这个效果。

/* 定义一个遮罩层 */
.mask {
    position: relative;
}

.mask:after {
    content: ';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom,transparent,rgba(0,0.8));
}

代码解释：

首先，我们把图片的父元素定义为相对定位的，这样可以让我们在其上方创建一个绝对定位的遮罩层。接着，我们使用伪元素::after为这个遮罩层创建一个半透明的渐变背景，通过设置它的宽度为100%、高度为50%和bottom为0来使它覆盖底部50%的区域，达到遮罩效果。

最后，我们在HTML中加入以下代码来实现遮罩效果：

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

这样，我们就成功给图片添加了一个简单的遮罩效果。