アルファチャンネルとopacityの違い:FirefoxとSafariのCSS対応

エ・ビスコム・テック・ラボ
2008-02-22 08:00:00
  • このエントリーをはてなブックマークに追加

transparentの指定

 色の値をtransparentと指定すると、背景や罫線を透明な状態で表示することができる。これは、アルファチャンネルを「0」と指定した場合と同じだ。

 transparentという色の値は、CSS 1ではbackground-colorプロパティで、CSS 2ではbackground-colorとborder-colorプロパティで利用することができたが、CSS 3からは色を指定するすべてのプロパティで利用できるようになっている。

 現在、CSS 3のtransparentの処理に対応しているのは、Firefox 3とSafariだ。たとえば、次のサンプルでは上から順に、background-color、border-color、colorプロパティの値をtransparentと指定している。これをFirefox 3とSafariで表示すると、指定した通りに背景、罫線、文字の色が透明になる。なお、背景は白、罫線は黄色、文字は黒色で表示している。

Firefox 3の表示 Firefox 3の表示
Safari 3の表示 Safari 3の表示
body{
background-image: url(back.gif);
}

div.samp1{
background-color: transparent;
}

div.samp2{
border-color: transparent;
}

div.samp3{
color: transparent;
}
ブラウザで表示を確認する

 Internet Explorer 7やOperaの表示を確認すると、CSS 2で定義された背景と罫線の色は透明になるが、文字の色は透明にならない。また、Internet Explorer 6ではborder-color:transparentと指定すると、罫線が黒色で表示されるという問題があるので、注意が必要だ。

Internet Explorer 7の表示 Internet Explorer 7の表示
Operaの表示 Operaの表示
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]