Transparency/Display

Overview

This page experiments with the CSS features of Opacity, Visibility, Display and RGBa. One common use of these features is to hide (or obscure) an element, while optionally collapsing or preserving the element's space, events and focus. The table below illustrates how an element behaves when it can't be seen.

Property: Value	Collapsed	Receives Events	Receives Focus
opacity: 0	No	Yes	Yes
visibility: hidden	No	No	No
display: none	Yes	No	No

Opacity

Specifies the transparency of a rendered element, without affecting the space it occupies, its handling of events or its ability to receive focus.

Also see RGBa.

opacity: 1

The element is fully opaque.

opacity: 0.5

The element is 50% transparent.

opacity: 0

The element is invisible, but still occupies the space, remains a focus target and can accept events (e.g., mouse-over can cause the cursor to change).

Irreversible Opacity

The opacity of a nested element is calculated by multiplying the opacity of all parent elements. For example, if the opacity of an outer element is set to 0.5, then setting the opacity of a nested element to 1.0 results in the nested element having an opacity of 0.5 * 1.0 = 0.5 (no change).

Visibility

visibility:visible

The element is displayed normally and accepts events and focus.

visibility:hidden

The element is visually transparent, but the space it occupies remains, and it doesn't receive events or focus.

Display

display:block

The element is displayed as a block element (e.g., <div>) and accepts events and focus.

display:block (margin+padding)

display:inline

The element is displayed inline (e.g., <span>) and accepts events and focus.

display:inline (margin+padding)

display:inline-block

The element is rendered as a box, but flows as if it were an inline element.

display:inline-block (margin+padding)

display:none

The element is not displayed and does not accept events or focus.

display:list-item

The element is displayed as a list item element (i.e., <li>).

Trans/Display