如何在照片 CSS 上放置黑色叠加层

有时候我们需要在网页上展示一些照片，但可能需要在照片上放置一些文字或者其他元素，为了让照片上的元素更加醒目，我们可以在照片上面放置一个黑色叠加层，使得照片上的元素更加显眼。

下面我们介绍一下如何在照片 CSS 上放置黑色叠加层。

使用伪元素来创建叠加层

我们可以使用 CSS 伪元素（:after 或者 :before）来在照片上添加叠加层，代码如下：

.photo {
  position: relative;
}

.photo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

通过上面的代码，我们在 .photo 这个元素上创建一个伪元素 ::before，然后设置 position: absolute 使其定位到 .photo 元素的顶部，使用 top、left、right 和 bottom 属性让其充满整个 .photo 元素。接着设置 background-color 为半透明的黑色，这里我们使用了 rgba() 函数来表示颜色和透明度。

最后设置 z-index ，使得黑色叠加层在照片之上。

改进黑色叠加层

上面代码创建的叠加层只是简单的半透明黑色遮罩，如果想要让它更加醒目，我们可以对其做一些改进，代码如下：

.photo {
  position: relative;
}

.photo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.photo:hover::before {
  opacity: 1;
}

在上面的代码中，我们给黑色叠加层添加了一个 opacity 属性，用来控制叠加层的透明度。

我们初始把叠加层的透明度设置为 0，这样黑色叠加层就会变为透明，不会影响到照片的展示。然后我们通过 :hover 伪类来控制叠加层的透明度变化，当鼠标悬浮在 .photo 元素上时，叠加层的透明度变为 1，变得不透明起来。

同时我们也添加了一个 transition 属性，用来控制鼠标悬浮时，叠加层从透明到不透明的过渡动画。

结论

通过上面的方法，我们可以轻松地在照片 CSS 上放置黑色叠加层，并且可以通过代码改进使其更加美观，实现类似于图库展示效果的效果。