HTML & CSS Interview Question #73

How do CSS colors and opacity work?

CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate

Quick Interview Answer

CSS colors can be expressed using named colors, hexadecimal notation, rgb(), hsl(), and other modern color functions. Some color syntaxes support an alpha component for transparency.

Detailed Explanation

CSS colors can be expressed using named colors, hexadecimal notation, rgb(), hsl(), and other modern color functions. Some color syntaxes support an alpha component for transparency.

The opacity property affects the entire rendered element, including its descendants, while an alpha channel on a background color can make only that color transparent. This distinction matters when text should remain fully opaque.

Code Example

.overlay {
    background: rgb(0 0 0 / 50%);
    color: white;
}

/* This affects the whole element and its children. */
.disabled-card {
    opacity: .6;
}