How To Change Background Opacity Without Affecting Children In CSS

The simplest way to create a transparent background, without affecting any child elements, is by using the rgba function. This only affects the color itself and has outstanding support among browsers.

background-color: rgba(255, 0, 0, 0.3);

The 4th and last argument of this function determines the color's opacity, with 1 being fully opaque and 0 being completely transparent.