opacity

Introduction

The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

Opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.

Caution

The group opacity on Android is true by default, while on iOS is false. Use overlap and overlap-ios to define how opacity affects the background and contents of the view.

Group opacity will force the system to use off-screen rendering to render the view, which has performance issues on both Android and iOS. And, on Android, the overflow: visible will lose effect.

Examples

Syntax

opacity: 1;
opacity: 0.5;
opacity: 0;

Values

A <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.

Value	Meaning
0	The element is fully transparent (that is, invisible).
Any <number> strictly between 0 and 1	The element is translucent (that is, content behind the element can be seen).
1	The element is fully opaque (visually solid).

Formal definition

Initial value	1
Applies to	all elements
Inherited	no
Animatable	yes

Formal syntax

opacity: <number>;

Difference from Web

Opacity will affect the background and contents as a whole. For Lynx iOS should set overlap-ios={true}.

Compatibility

LCD tables only load in the browser

opacity#

#Introduction

#Examples

#Syntax

#Values

#Formal definition

#Formal syntax

#Difference from Web

#Compatibility