在图像 CSS 上添加黑色层

简介

在图像上添加黑色层可以帮助改善图像的可读性、视觉层次和添加重点信息。在 CSS 中可以使用伪元素来添加黑色层，其中最常用的伪元素是 ::before 和 ::after。

代码

下面是一个简单的示例代码：

.container {
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

在上述代码中，我们首先给要添加黑色层的容器设置了 position: relative;，然后使用 ::before 伪元素来添加黑色层。在 ::before 伪元素中，我们设置了 content: "" 表示该伪元素为空，并设置其 position: absolute; 以使其覆盖在 container 元素上方。然后我们设置了伪元素的 width 和 height 为 100%，这样就能保证其与父容器有同样的大小。接着我们设置了 background-color: rgba(0, 0, 0, 0.5); 来定义黑色层的颜色和透明度，在本例中我们设置了透明度为 50%。最后一个重要的属性是 z-index: 1;，它定义层的叠放顺序，使层在其他元素之上。

结论

通过在图像 CSS 上添加黑色层，我们可以改善视觉效果、提高图像的可读性和添加重点信息。本文演示了如何使用 ::before 伪元素在 CSS 中添加黑色层。