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.
<alpha-value>
<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 | 含义 |
|---|---|
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). |
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.
使用
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);
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.
| 初始值 |
1.0
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 |
the specified value, clipped in the range
[0,1]
|
| 动画类型 | a number |
<alpha-value>where
<alpha-value> = <number> | <percentage>
<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>
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 */
}
<img src="//developer.mozilla.org/static/img/opengraph-logo.png" alt="MDN logo" width="128" height="146" class="opacity">
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;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Color Module Level 4
The definition of 'opacity' in that specification. |
工作草案 | Defines percentage opacity values. |
|
CSS Color Module Level 3
The definition of 'opacity' in that specification. |
推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
opacity
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
1
|
IE 完整支持 9 | Opera 完整支持 9 |
Safari
完整支持
2
|
WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
| Support for percentage opacity values | Chrome 完整支持 78 | Edge 完整支持 79 | Firefox 完整支持 70 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 完整支持 78 | Chrome Android 完整支持 78 | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 完整支持 12.0 |
完整支持
不支持
要求使用供应商前缀或不同名称。
color
color-adjust
opacity