在变暗的图像上有明亮的文字

Question

I have the following CSS component:

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

The itemStyle variable references a background image.

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

The css classes are these:

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

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

I want to have white text over an image which is darkened.

However, if I use the code above, the text will also be darkened.

If I make two separate div classes like this:

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

Then the text will be placed beneath the image.

How can I have bright text on top of a darkened image?

Answer 1

To make the text jump back to the top of the image just apply position: absolute to the .dimmed-image :

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

This will take the image outside the normal rendering and as long as you don't specify any other location will make it stay at the same place. Meanwhile the elements below (eg the text) will ignore the image and be rendered starting from the same point where the image starts.

Answer 2

Place the dimmed image and the text in separate divs and wrap them together in a container div.

Give the container div the same width and height as the one containing the image. Do the same to the bright-text div as well. Use position to place your text above the image.

That is the best approach.

Also className is invalid. Use class instead.

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

Inside the .bright-text div you can also use position , left and top css rules to move around your text, if you wish.