CSSでの要素の透過を指定する

ロールオーバーなどで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 */
}

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ