O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

opacity

Values:

<number>

Initial value:

1

Applies to:

All elements

Inherited:

No

Computed value:

Same as declared (or a clipped value if declared value must be clipped)

Description:

Defines an element’s degree of opacity using a number in the range 0–1, inclusive. Any values outside that range are clipped to the nearest edge (0 or 1). This property affects every visible portion of an element. If it is necessary to have the content of an element semiopaque but not the background, or vice versa, use alpha color types such as rgba().

An element with opacity of 0 is effectively invisible and may not respond to mouse or other DOM events. Because of the way semiopaque elements are expected to be drawn, an element with opacity less than 1.0 creates its own stacking context even if it is not positioned. For similar reasons, an absolutely positioned element with opacity less than 1 and a z-index of auto force-alters the z-index value to 0.

Examples:

h2 {opacity: 0.8;}
.hideme {opacity: 0;}

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required