css背景图加渐变蒙版 |文本整齐css

首先，大家需要准备一张需要添加背景渐变蒙版的图片，比如以下这张图片：

/* CSS代码 */
.img-container {
background-image: url('example.jpg');
background-size: cover;
position: relative;
}
.img-container::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.8));
pointer-events: none;
}

上面的代码中，大家使用了伪元素选择器::before来创建一个在图片上方的渐变层，从而实现了背景图加渐变蒙版。接下来大家解释一下代码的具体实现过程：

/* CSS代码 */
.img-container {
/* 设置背景图片 */
background-image: url('example.jpg');
/* 背景图片自适应 */
background-size: cover;
/* 相对位置 */
position: relative;
}
.img-container::before {
/* 渐变层的内容 */
content: "";
/* 绝对定位，覆盖在图片之上 */
position: absolute;
/* 渐变层的上下左右都与图片相同 */
top: 0;
right: 0;
bottom: 0;
left: 0;
/* 渐变层的渐变颜色 */
background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.8));
/* 不响应用户事件，保证点击事件穿透到下方的图片 */
pointer-events: none;
}

通过上面的代码，大家就可以实现CSS背景图加渐变蒙版了。如果需要调整渐变层的颜色或者位置，只需要修改相关的CSS属性即可。