javascript - 在黑暗的图像上有明亮的文字

Question

我有以下 CSS 组件:

<div className="dimmed-image" style={itemStyle}>
   <div className="bright-text">
      <br/>
      <h2 className="white-center">Some text</h2>
   </div>
</div>

itemStyle 变量引用背景图像。

var itemStyle = {
  backgroundImage: 'url(' + imageLocation + ')'
};

css 类是这些:

.dimmed-image {
    -webkit-filter: brightness(60%);
}

.bright-text {
    -webkit-filter: brightness(100%) !important;
}

我想在变暗的图像上显示白色文本。

但是，如果我使用上面的代码，文本也会变暗。

如果我像这样创建两个单独的 div 类:

<div className="dimmed-image" style={itemStyle}>
</div>
<div className="bright-text">
  <br/>
  <h2 className="white-center">Some text</h2>
</div>

然后文本将放置在图像下方。

如何在变暗的图像上显示明亮的文字？

Answer 1

要使文本跳回图像顶部，只需将 position: absolute 应用于 .dimmed-image:

.dimmed-image {
  ...
  position: absolute;
}

这会将图像置于正常渲染之外，只要您不指定任何其他位置，图像就会停留在同一位置。同时，下面的元素(例如文本)将忽略图像并从图像开始的同一点开始渲染。