如何在css中给背景图片加上蒙版或者加上遮片

时分秒 2024-08-05 15:28 时分秒网 | 隐藏边栏 | 抢沙发 | 11 0

文章评分 0 次，平均分 0.0 ：

如何在css中给背景图片加上蒙版或者加上遮片？

在CSS中，给背景图片添加蒙版通常是通过使用伪元素和rgba颜色来实现的。以下是一个简单的例子：

HTML部分:

<div class="image-with-overlay">
  <!-- Content here -->
</div>

CSS部分:

.image-with-overlay {
  position: relative;
  background-image: url('path-to-your-image.jpg');
  background-size: cover;
  background-position: center;
  width: 300px; /* 设置你需要的宽度 */
  height: 200px; /* 设置你需要的高度 */
  color: white;
}
 
.image-with-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 黑色蒙版，50% 不透明度 */
}

这段代码会在.image-with-overlay元素上创建一个全屏的黑色蒙版，其不透明度为50%。你可以通过调整rgba中的不透明度值来改变蒙版的透明度。

「点点赞赏，手留余香」

还没有人赞赏，快来当第一个赞赏的人吧！

给时分秒打赏

予人玫瑰，手有余香