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.
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
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