Question

以下是在图片上显示文字和叠加层的代码：

.image {
  position: relative;
  width: 100%;
  /* for IE 6 */
}

img:hover {
  opacity: 0.2;
}

h2 {
  position: absolute;
  color: white;
  top: 20px;
  left: 100px;
  width: 100%;
}

<div class="image">

  <img src="https://www.monsitexemple.fr/lcee/wp-content/uploads/2017/08/mil2-1-300x225.jpg">
  <h2>Hello</h2>

</div>

Fiddle here

如你所见，白色文本会受到叠加层不透明度的影响。所以我的问题是：你如何保持文本“明亮”，即不受不透明度的影响？

Answer 1

您可以做的一件事是为图像设置div，并使其背景为黑色。这样，背景保持黑暗，文本可见，但图像淡出。

我在你的小提琴上添加了一行css，你只需要制作div本身并正确设计它。我不知道你的div是响应还是静态宽度。

https://jsfiddle.net/ed5c5u8h/

/archive/date/p

Answer 2

我认为文字不受不透明度的影响。它只是一种光学效应。看看这个：https://jsfiddle.net/ed5c5u8h/5/颜色与白色不同。

{{1}}

如何在css上叠加明亮的白色文字？

2 个答案: