The opacity
CSS property sets the transparency of an element or the degree to which content behind an element is visible.
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.
Using opacity
with a value other than 1
places the element in a new stacking context.
If you do not want to apply opacity to child elements, use the background
property instead. For example:
background: rgba(0, 0, 0, 0.4);
<number>
<number>
in the range 0.0
to 1.0
, 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 (default value) | The element is fully opaque (visually solid). |
<number>
div { background-color: yellow; } .light { opacity: 0.2; /* Barely see the text over the background */ } .medium { opacity: 0.5; /* See the text more clearly over the background */ } .heavy { opacity: 0.9; /* See the text very clearly over the background */ }
<div class="light">You can barely see this.</div> <div class="medium">This is easier to see.</div> <div class="heavy">This is very easy to see.</div>
:hover
img.opacity { opacity: 1; filter: alpha(opacity=100); /* IE8 and lower */ zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; }
<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity">
If text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.
Color contrast ratio is determined by comparing the luminosity of the opacity-adjusted text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'opacity' in that specification. | Working Draft | Defines opacity as animatable. |
CSS Color Module Level 3 The definition of 'opacity' in that specification. | Recommendation | Initial definition |
Initial value | 1.0 |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual |
Computed value | the specified value, clipped in the range [0,1]
|
Animation type | a number |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1
|
9 | 9 | 1.2 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | Yes | Yes | 4 | 9 | 3.2 | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/opacity