Transparency controls how much underlying color or content remains visible through a foreground element. In graphics, the browser treats a semitransparent foreground as if it were painted on glass, mixing it with the background. section 7.6.2
The browser calculates each output color channel by weighting the foreground with its alpha and the background with the remaining weight: Cₒᵤₜ = Cₛαₛ + Cᵦαᵦ(1 − αₛ). With an opaque background, this becomes Cₒᵤₜ = Cₛαₛ + Cᵦ(1 − αₛ), a linear interpolation controlled by transparency. section 7.6.2
CSS expresses transparency through an alpha channel:
- Use rgb() with a slash followed by an alpha value from 0 to 1 or 0% to 100%. section 7.1.1
- Use eight-digit hexadecimal notation, #rrggbbaa; an alpha value of 00 is completely transparent and ff is completely opaque. section 7.1.1
A semitransparent blue over red
Place rgb(0 0 255 / 0.5) over rgb(255 0 0). The foreground contributes half-strength blue, while the background contributes the remaining half-strength red, producing normalized RGB (0.5, 0, 0.5), or rgb(128 0 128). section 7.6.2
h1
color: rgb(128 0 128 / 0.5);
}
Inspect the CSS listing for purple text with a 0.5 alpha value. section 7.1.1
