1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
---
title: opacity
slug: Web/CSS/opacity
translation_of: Web/CSS/opacity
---
<div>{{CSSRef}}</div>
<h2 id="Summary" name="Summary">概述</h2>
<p>opacity属性指定了一个元素的<strong>不透明度</strong>。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。</p>
<p>当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。</p>
<p>使用opacity属性，当属性值不为1时，会把元素放置在一个新的<a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context">层叠上下文</a>中。</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="brush:css notranslate">/* 完全不透明 */
opacity: 1;
opacity: 1.0;
/* 半透明 */
opacity: 0.6;
/* 完全透明 */
opacity: 0.0;
opacity: 0;
opacity: inherit;
</pre>
<h3 id="Values" name="Values">属性值</h3>
<dl>
<dt><code><number></code></dt>
<dd> {{cssxref("<number>")}} 是一个0.0到1.0范围内的数字值,这个数值既包含也代表通道的透明度，也就是alpha通道的值。任何一个溢出这个取值区间的值，尽管有效，但会被解析为在取值范围内最靠近它的值。
<table class="standard-table">
<tbody>
<tr>
<th>值</th>
<th>释义</th>
</tr>
<tr>
<td><code>0</code></td>
<td>元素完全透明 (即元素不可见).</td>
</tr>
<tr>
<td>任何一个位于0.0-1.0之间的 {{cssxref("<number>")}}</td>
<td>元素半透明 (即元素后面的背景可见).</td>
</tr>
<tr>
<td><code>1</code></td>
<td>元素完全不透明(即元素后面的背景不可见).</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h3 id="正式规则">正式规则</h3>
<pre class="syntaxbox notranslate">{{csssyntax("opacity")}}</pre>
<h2 id="示例">示例</h2>
<h3 id="Basic_example" name="Basic_example">基本示例</h3>
<pre class="brush: css notranslate">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 */
}
</pre>
<pre class="brush: html notranslate"><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>
</pre>
<pre class="syntaxbox language-html notranslate">{{EmbedLiveSample('Basic_example', '640', '64')}}</pre>
<h3 id="Different_opacity_with_hover" name="Different_opacity_with_hover">:hover时opacity的不同</h3>
<pre class="brush: css notranslate">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;
}</pre>
<pre class="brush: html notranslate"><img src="//developer.mozilla.org/media/img/mdn-logo.png"
alt="MDN logo" width="128" height="146"
class="opacity">
</pre>
<p>{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}</p>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>定义动态透明度</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Colors', '#propdef-opacity', 'opacity')}}</td>
<td>{{Spec2('CSS3 Colors')}}</td>
<td>初始定义</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<div>{{Compat("css.properties.opacity", 2)}}</div>
<div id="compat-mobile"></div>
<ul>
<li><strong>历史:</strong> 在 Mozilla 1.7 (Firefox 0.9)版本 之前，“<code>-moz-opacity</code>”<code> 属性一直以一种非标准的方式在使用。在</code>Firefox 0.9版本中 ，这种行为得到了改变，这个属性被重命名为opacity。从那以后，<code>-moz-opacity属性仅作为opacity属性的别名而存在。</code></li>
<li>Gecko 1.9.1 (Firefox 3.5) 以后的版本不再支持<code> -moz-opacity属性 和 Javascript中的MozOpacity属性（Gecko13中删除），到目前为止，你应该使用opacity属性。</code></li>
<li>在9.0版本之前，Internet Explore浏览器不支持opacity属性, 它宁愿使用私有滤镜代替。.</li>
<li>IE4 —IE9 支持下面的扩展形式： <code>progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>.</li>
<li>IE8引入了与“fliter滤镜”同义的"-ms-filter" 属性。在IE10中不再支持这两个属性。</li>
<li>和“<code>-moz-opacity</code>” 属性相似, "<code>-khtml-opacity"从2004年年初</code> (Safari 1.2发布)，<code>已经不再受到支持。</code><br>
Konqueror 从来不支持 <code>-khtml-opacity</code> 属性，从第四版开始，它一直自持opacity属性。</li>
</ul>
<h2 id="See_also" name="See_also">阅读更多</h2>
<ul>
<li><a href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532910(VS.85).aspx">MSDN Microsoft's filter:alpha(opacity=xx)</a></li>
</ul>
|
