CODEWITHSUNDEEP
csscolorsopacity
Martin
Martin

Reputation: 6156

What CSS brightness filter value corresponds to a given semi-transparent black overlay to darken an image?

A semi-transparent black overlay is a popular way to darken an image; but considering that the support for the last IE version ended some time ago and all modern browsers support filter: brightness(...) we could now ditch that cumbersome approach and replace it with a single line of CSS.

But how exactly is the correlation between the opacity or alpha channel value of the black overlay veil and the brightness value of the filter function that would result in the exact same visual appearance?

Here is an example for both approaches:

.container {
  padding: 0;
  position: relative;
  width: 100px;
  height: 100px;
}

.image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.veil {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #000000;  // these two lines could be replaced by using a background color
  opacity: 0.5;               // with an alpha channel: #0000007F is black at 0.5 opacity
}

.darken {
  filter: brightness(0.5);
}
<fieldset class="container">
  <legend>using overlay</legend>
  <img class="image" src="https://images.unsplash.com/photo-1726853546098-380e29da9e31?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"/>
  <div class="veil"></div>
</fieldset>

<fieldset class="container">
  <legend>using filter</legend>
  <img class="image darken" src="https://images.unsplash.com/photo-1726853546098-380e29da9e31?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"/>
</fieldset>

Upvotes: -1

Views: 26

Answers (1)

Martin
Martin

Reputation: 6156

The correlation is exactly inverted: a 100% brightness corresponds to 0% opacity of the black veil, a 95% brightness to 5% opacity, a 37% brightness to 63% opacity, and so forth.

To replace the following style

.veil {
  background-color: #000000BF;
}

we would set the filter

.darken {
  filter: brightness(0.25);
}

The table tells us that the alpha channel BF corresponds to 75% opacity (of the veil) and therefore to 25% brightness.

Upvotes: 0

Related Questions