initial commit

1 files changed, 154 insertions, 0 deletions

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
+---
+<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>&lt;number&gt;</code></dt>
+ <dd> {{cssxref("&lt;number&gt;")}} 是一个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("&lt;number&gt;")}}</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">&lt;div class="light"&gt;You can barely see this.&lt;/div&gt;
+&lt;div class="medium"&gt;This is easier to see.&lt;/div&gt;
+&lt;div class="heavy"&gt;This is very easy to see.&lt;/div&gt;
+</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">&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png"
+     alt="MDN logo" width="128" height="146"
+     class="opacity"&gt;
+</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>