AtoZ CSS Quick Tip: Control Element Visibility with Opacity

O is for opacity

We can use opacity to control the visibility of elements on the page - anything from completely transparent to completely opaque as discussed in the original screencast video.

Here’s a couple of tips when using opacity to ensure the right parts of the element are semi-transparent and to demonstrate how we can create fading effects without relying on JavaScript effects libraries.

Tip 1: opacity applies to the whole element

When setting opacity on an element, the whole element, including its children are made semi-transparent. The opacity is not inherited by the children so unfortunately you can’t set opacity:1 on them to make them fully opaque again.

If you want to have the background of an element semi-transparent but want the child elements (eg: text or images) to be opaque, use a semi-transparent background instead of using opacity.

[code language="css"]
.module {
background: rgba(255,255,255,0.5); /* semi-trans white */
}
[/code]

Tip 2: opacity affects stacking context

When setting opactiy to a value less than 1 the element is placed on a new layer so the background can be shown beneath the semi-transparent element. This is similar to how z-index works and, just like z-index, using opacity creates a new stacking context.

Continue reading %AtoZ CSS Quick Tip: Control Element Visibility with Opacity%

by Guy Routledge via SitePoint