Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    opacity

    概要

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

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

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

    構文

    形式文法: <number>
    opacity: 1
    opacity: 1.0
    opacity: 0.6
    opacity: 0.0
    opacity: 0
    
    opacity: inherit
    

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

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

    hbox.example {
      opacity: 0.5; /* the hbox を通り抜けて背景が見えます */
    }

    実際の表示例

    pre {                               /* make the box translucent (20% opaque) */
       border: solid red;
       opacity: 0.2;
       filter: alpha(opacity=20);       /* IE8 and lower */
       zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
    }
    pre {                               /* make the box translucent (50% opaque) */
       border: solid red;
       opacity: 0.5;
       filter: alpha(opacity=50);       /* IE8 and lower */
       zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
    }
    pre {                               /* make the box translucent (80% opaque) */
       border: solid red;
       opacity: 0.8;
       filter: alpha(opacity=80);       /* IE8 and lower */
       zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
    }

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

    <!doctype html>
    <html>
    <head>
    <style>
    img.opacity {
       opacity: 1;
       filter: alpha(opacity=50);
       zoom: 1;
    }  
     
    img.opacity:hover {
       opacity: 0.5;
       filter: alpha(opacity=100);
       zoom: 1;
    }
    </style>
    </head>
    
    <body>
    <img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity">
    </body>
    </html>
    

    仕様書

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

    ブラウザ実装状況

    機能 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: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す