From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/opacity/index.html | 154 +++++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/zh-cn/web/css/opacity/index.html (limited to 'files/zh-cn/web/css/opacity') diff --git a/files/zh-cn/web/css/opacity/index.html b/files/zh-cn/web/css/opacity/index.html new file mode 100644 index 0000000000..4723b4338c --- /dev/null +++ b/files/zh-cn/web/css/opacity/index.html @@ -0,0 +1,154 @@ +--- +title: opacity +slug: Web/CSS/opacity +translation_of: Web/CSS/opacity +--- +
{{CSSRef}}
+ +

概述

+ +

opacity属性指定了一个元素的不透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。

+ +

当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。

+ +

使用opacity属性，当属性值不为1时，会把元素放置在一个新的层叠上下文中。

+ +

{{cssinfo}}

+ +

语法

+ +
/* 完全不透明 */
+opacity: 1;
+opacity: 1.0;
+
+/* 半透明 */
+opacity: 0.6;
+
+/* 完全透明 */
+opacity: 0.0;
+opacity: 0;
+
+opacity: inherit;
+
+ +

属性值

+ +
+
<number>
+
 {{cssxref("<number>")}} 是一个0.0到1.0范围内的数字值,这个数值既包含也代表通道的透明度，也就是alpha通道的值。任何一个溢出这个取值区间的值，尽管有效，但会被解析为在取值范围内最靠近它的值。 + + + + + + + + + + + + + + + + + + + +
值释义
0元素完全透明 (即元素不可见).
任何一个位于0.0-1.0之间的 {{cssxref("<number>")}}元素半透明 (即元素后面的背景可见).
1元素完全不透明(即元素后面的背景不可见).
+
+
+ +

正式规则

+ +
{{csssyntax("opacity")}}
+ +

示例

+ +

基本示例

+ +
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>
+
+ +
{{EmbedLiveSample('Basic_example', '640', '64')}}
+ +

:hover时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;
+}
+ +
<img src="//developer.mozilla.org/media/img/mdn-logo.png"
+     alt="MDN logo" width="128" height="146"
+     class="opacity">
+
+ +

{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}定义动态透明度
{{SpecName('CSS3 Colors', '#propdef-opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}初始定义
+ +

浏览器兼容性

+ +
{{Compat("css.properties.opacity", 2)}}
+ +
+ + + +

阅读更多

+ + -- cgit v1.2.3-54-g00ecf