---
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>

{{csssyntax("opacity")}}

<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>