如何用CSS在照片上制作那些“暗光”？

Question

我目前正在编写一个新网站，但有一个小问题。我正在编码幻灯片标题，我想让照片变暗以使文本更明显。我知道我可以编辑照片，但我猜 CSS 中有这样的选项。我记得有一次我在 WordPress Elementor 中制作一个网站时，有这样的幻灯片选项，不幸的是我不记得这个选项是如何调用的，那是很久以前的事了，现在我不使用任何 CMS。

嗯，我不知道它叫什么名字，而且我在网上找不到任何东西。我认为可以只创建一个 div 容器，创建一个半透明框并将其放置在我的幻灯片之前，但我不确定是否还有其他选项可以实现此效果。

我将非常感谢您的帮助。

Answer 1

您可以在图像顶部使用线性渐变来做到这一点。线性渐变是逐渐变化的颜色区域，在本例中是从透明到黑色。您可以使用此网站更轻松地生成它们。

下面的工作示例。请注意，效果是通过三层完成的。第一个是图像，第二个是渐变，最后的第三个是文本。它不需要使用 div 来完成，您也可以使用伪元素来完成，但为了简单起见，因为它更容易理解，我使用 div 来进行演示

.container {
  position: relative;
  width: min-content;
}

.gradient-container {
  position: absolute;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,206,255,0) 100%);
  inset: 0;
}

.text-container {
  position: absolute;
  bottom: 0;
  padding: 1rem;
  color: white;
  font-weight: bold;
}

<div class="container">
  <img src="https://placecats.com/300/200" />
  <div class="gradient-container"></div>
  <div class="text-container">
    Clearly readable text
  </div>
</div>