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;
}

这将使图像超出正常渲染范围，只要您不指定任何其他位置就会使其保持在同一位置。同时，下面的元素（例如文本）将忽略图像，并从图像开始的同一点开始渲染。

Answer 2

将灰色图像和文本放在单独的div中，并将它们放在一个容器div中。

为容器div提供与包含图像的宽度和高度相同的宽度和高度。对bright-text div也一样。使用position将文字放在图片上方。

这是最好的方法。

此外className无效。请改用class。

HTML：

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

CSS

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

.dimmed-image-wrapper {
  position: relative;
  width: [same-as-dimmed-image]px;
  height: [same-as-dimmed-image]px; 
}

.bright-text {
  position: absolute;
  left: 0;
  top: 0;
  width: [same-as-dimmed-image]px;
  height: [same-as-dimmed-image]px; 
}

在.bright-text div中，如果您愿意，还可以使用position，left和top css规则移动文字。

在昏暗的图像上显示明亮的文字

2 个答案: