Adventures in CSS Semi-Transparency Land

Recently, a landing page needed adjustments. The code revealed two semi-transparent overlays—identical RGB background colors—stacked atop an image:

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174416798087828.jpg" class="lazy" alt="Adventures in CSS Semi-Transparency Land "><div class="over1"></div>
<div class="over2"></div>

Redundant layering was evident; a single overlay with adjusted opacity would suffice. The original coder opted for stacking instead of increasing opacity.

The goal: replace the two overlays with a single overlay having equivalent visual opacity. The solution leverages the same formula used for additive compositing:

<code>a0   a1 - a0 * a1</code>

where a0 and a1 represent the alphas of the two overlays.

An interactive demo (not reproducible here, but originally found on CodePen) compared a two-layer overlay (adjustable alphas) against a single-layer equivalent using the above formula. While visually identical without the underlying image, subtle differences appeared with the image present, possibly due to variations in image lightness/darkness. However, these differences were negligible when viewed individually.

The formula extends to multiple layers, calculating the equivalent of the bottom two, then combining that result with the next layer above, and so on.

Further exploration examined the solid background equivalent of a solid layer (c0) with a semi-transparent overlay (c1, alpha a). The resulting channel calculation (red, green, blue) is:

<code>ch0   (ch1 - ch0) * a</code>

This was implemented in Sass:

/* per channel function */
@function res-ch($ch0, $ch1, $a) {
  @return $ch0   ($ch1 - $ch0)*$a;
}

@function res-col($c0, $c1, $a) {
  $ch: 'red' 'green' 'blue'; /* channel names */
  $nc: length($ch); /* number of channels */
  $ch-list: ();

  @for $i from 0 to $nc -1 {
    $fn: nth($ch, $i   1);
    $ch-list: $ch-list, res-ch(call($fn, $c0), call($fn, $c1), $a);
  }

  @return rgb($ch-list);
}

Another interactive demo (also originally on CodePen) compared the two-layer and computed single-layer equivalents, revealing browser inconsistencies across devices and operating systems. Mobile browsers (Android/iOS, Firefox) consistently matched, as did Windows browsers (mostly). WebKit browsers (macOS/Linux) showed more varied results, potentially resolved by using an sRGB profile. Even monitor changes could affect visual consistency.

Despite these inconsistencies, the differences are minor in practical scenarios. The side-by-side comparison is unlikely in real-world use, and inherent variations in color rendering across systems already exist. Therefore, the slight discrepancies are generally inconsequential.

The above is the detailed content of Adventures in CSS Semi-Transparency Land. For more information, please follow other related articles on the PHP Chinese website!