memocarilog

ロールオーバーなどでopacityプロパティを使う機会がありますが、なんとなくあいまいに使用していたので、要素の透過度を指定するプロパティopacityについて箇条書きにしてまとめてみました。opacityというよりもfilterの方が扱いがややこしい印象です。

opacityプロパティについて

•要素の透過度を指定するプロパティ。FireFox, Webkit, Operaで対応している。
•IEはIE9以降で実装される。IE8以下では独自仕様の”filter”を使って同様の効果をだせる。
•opacityプロパティを指定した要素直下にあるテキスト類は透過度を引き継いでしまう為、別の要素としてマークアップしなければならない。
•visibility:hidden と　opacity:0 は同じ意味

＜使用例＞

*{opacity: 値}

値に入るもの：
　　inherit　一番近い上位要素の色を継承
　　0以上 1以下の実数　0は完全透過、1は完全不透過
　　例）透過度を90％に指定する場合は”opacity= .9”

filterについて

•マイクロソフトの独自仕様であり、W3Cの検証には不合格になる
•widthを指定しないと読まれない場合がある。（インライン要素では使えない場合がある）

＜使用例＞

*{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=値)";}　/* IE8 */
*{filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,opacity=値);}

値に入るもの:
0から100までの整数。
例）透過度を90％の場合は”opacity=90”

opacityプロパティの透過度demoです。（画像の隣の数字はopacityの値です。）
確かに同じ要素に書き込んだ数字部分も透過されてしまいますね。

下記の書き方で主要なブラウザで透過の指定が可能です。

*{	
opacity: .9; /* FireFox, Webkit, Opera */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=90)";/* IE8 */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); /* IE6,7 */
}