mozilla
Your Search Results

    opacity

    概要

    CSS の opacity プロパティは要素の不透明度を定義します。不透明度とは、要素の裏にある背景が覆われる程度を表します。

    この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。すなわち、要素とそれに含まれる子要素は、互いを比べると異なる不透明度でありながら、その要素の背景に対しては同程度の不透明度となります。

    このプロパティを 1 以外の値で用いると、その要素は新しいスタック文脈を作ります。

    • 初期値1.0
    • 適用対象全要素
    • 継承しない
    • メディアvisual
    • 計算値指定値。[0,1] の範囲内にクリップされます
    • アニメーションの可否可能。数値として可能
    • 正規順序形式文法で定義される一意のあいまいでない順序

    構文

    /* 完全に不透明 */
    opacity: 1;
    opacity: 1.0;
    
    /* 半透明 */
    opacity: 0.6;
    
    /* 完全に透明 */
    opacity: 0.0;
    opacity: 0;
    
    /* グローバルな値 */
    opacity: inherit;
    opacity: initial;
    opacity: unset;
    

    <number>
    0.0 以上 1.0 以下の <数量> で、不透明度を表します。これはアルファチャンネルの値です。範囲外の値も有効ですが、近い方の限界値におさめられます。
    意味
    0 要素は完全に透明です(不可視です)
    0 より大きく 1 未満の<数量> 要素は半透明です(背景が見えます)
    1

    要素は完全に不透明です(中身が詰まっています)

    形式構文

    <number>

    基本的な例

    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>
    

    :hover を使った透明度の変化

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

    仕様書

    仕様書 策定状況 コメント
    CSS Transitions
    The definition of 'opacity' in that specification.
    草案 opacity のアニメーション可能化
    CSS Color Module Level 3
    The definition of 'opacity' in that specification.
    勧告 初回定義

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート 1.0 1.0 (1.7 or earlier) 9.0 9.0 1.2 (125)
    8.0
    filter: alpha(opacity=xx)
    filter: "alpha(opacity=xx)"

    (both are synonymous)
    4.0
    filter: alpha(opacity=xx)
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート 1.0 1.0 (1.7) 9.0 9.0 3.2
    8.0
    filter: alpha(opacity=xx)
    filter: "alpha(opacity=xx)"

    (both are synonymous)
    4.0
    filter: alpha(opacity=xx)
    • 来歴: Mozilla 1.7 (Firefox 0.9) より前は、 -moz-opacity プロパティが非標準的な(受け継がれた)方法で実装されていました。Firefox 0.9 で動作が変更され、プロパティは opacity に改名されました。それ以来 -moz-opacityopacity の別名としてサポートされました。
    • Gecko 1.9.1 (Firefox 3.5) 以降では、-moz-opacity のサポートをやめ、javascript での MozOpacity のサポートは Gecko 13 で取り除かれました 。今はもう opacity だけを使うべきです。
    • バージョン 9 以前の Internet Explorer は opacity をサポートしておらず、代わりに filter をサポートしています。
    • IE4 から IE9 では、拡張書式 progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)をサポートしていました。
    • IE8 で導入された -ms-filter は、filter と同義語です。どちらも IE10 で消滅しました。
    • -moz-opacity と同じように、 -khtml-opacity は 2004 年の初め(Safari 1.2 のリリース時)になくなっています。Konqueror は -khtml-opacity をサポートしたことがありませんでしたが、opacity はバージョン 4.0 からサポートしてきました。

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: ethertank, sosleepy, mitsuba-clover
    最終更新者: mitsuba-clover,