此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
opacity
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
opacity 属性指定了一个元素的不透明度。换言之,opacity 属性指定了一个元素后面的背景的被覆盖程度。
当 opacity 属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,即使这个值没有被子元素继承。因此,一个元素和它包含的子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素有不同的 opacity 属性值。
使用 opacity 属性,当属性值不为 1 时,会把元素放置在一个新的层叠上下文中。
语法
css
/* 完全不透明 */
opacity: 1;
opacity: 1;
/* 半透明 */
opacity: 0.6;
/* 完全透明 */
opacity: 0;
opacity: 0;
opacity: inherit;
属性值
形式语法
opacity =
<opacity-value>
<opacity-value> =
<number> |
<percentage>
示例
基本示例
css
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 */
}
html
<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 时 opacity 的不同
css
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;
}
html
<img
src="//developer.mozilla.org/media/img/mdn-logo.png"
alt="MDN logo"
width="128"
height="146"
class="opacity" />
[フレーム]
规范
| Specification |
|---|
| CSS Color Module Level 4 # propdef-opacity |
| Scalable Vector Graphics (SVG) 2 # ObjectAndGroupOpacityProperties |
浏览器兼容性
Loading...