CSSで、透過度を指定するopacityプロパティに関する解説です。
opacityプロパティは、要素の透過度を指定するプロパティです。
従来、要素は背景を除いて完全な不透過となっておりましたが、このプロパティを用いる事で透過度を指定出来るようになります。
尚、対象となるのは前景色と背景色の双方です。
平成19年 5月14日現在、以下のユーザエージェントが対応しております。
また、ウィンドウズ版のインターネットエクスプローラでは、独自仕様のフィルタを用いる事で同様の効果が得られます(後述)。
opacityプロパティの書式は、以下のようになります。
opacity: 値値としては、以下のものが取れます。
inherit例えば、透過度を90％にする場合は、
* {background: #fff;color: #000;opacity: 0.9;}
と記述します。
インターネットエクスプローラではopacityプロパティはまだ実装されていないようですが、ウィンドウズ版のインターネットエクスプローラ 4.x以降では独自仕様のフィルタで同様の効果を出す事は出来ます。
但し、フィルタは以下の問題点があります。
フィルタはマイクロソフトが勝手に実装したものなので、勿論非公式です。
W3Cの検証サーヴィスに掛けると、必ずエラーになります。
特にインターネットエクスプローラ 4.xでは負荷に堪え兼ねてフリーズする場合さえあるとの事です。
実のところ、同じインターネットエクスプローラと言う名前のソフトウェアであっても、ウィンドウズ版とマッキントッシュ版は全く別物です。
アクティヴ Xなど、ウィンドウズ版限定の余計な機能が多数ありますが、フィルタもウィンドウズ版限定の余計なものです。
これは恐らくバグでしょうが、widthプロパティを指定しないとフィルタが効かない場合があります。
インライン要素はwidthプロパティを持たないのでインライン要素では実現出来ない場合があると言う事になります。
opacityプロパティと同等のスタイルをウィンドウズ版インターネットエクスプローラでも実現するには以下のようにします。
例えば、透過度を90％にする場合は、
* {background: #fff;color: #000;opacity: 0.9;filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90);}
と記述します。
括弧の中のOpacity=90が透過度の指定で、透過度を整数のパーセンテージ(単位は付けない)で指定します。
Style=0の数字を変える事で不透過度の表現が変わるようになっておりますが、ここでは解説は割愛させて頂きます。Enabled=1はフィルタ機能をオンにすると言うものです。一方、もじら系ブラウザも独自実装として非公式に-moz-opacityプロパティを実装しておりました。
現行のもじら系ブラウザでは-moz-opacityプロパティはopacityプロパティに読み替えられる事となっており、今更併記する必要は無いでしょう。
尚、もじらとしては-moz-で始まるプロパティは全て内部で利用するためだけのものとしており、一般人がスタイルシートに利用しない事を強く求めております。
公式なプロパティとなる(予定の)opacityプロパティが実装された事で、-moz-opacityプロパティは今後無効になる事も予想されます。
携帯端末向けのCSSではopacityプロパティは規定されておらず、従って実装もされていないようです。
但し、オペラ 9.x以降をベースとしたモバイルオペラでは利用出来る可能性があります。
平成19年 5月14日現在、opacityプロパティを含む色関係のプロパティは事前勧告となっております。
このため、現時点では以下の問題点がある事に注意して下さい。
特に後者に関しては、インターネットエクスプローラ及びオペラ 8.x以前など非対応環境の存在を忘れてはいけません。
opacityプロパティを認識しない場合、transparent(透過)値指定となっている背景以外は全て完全不透過となります。
恐らく多くの場合当該要素の可読性は損なわれないでしょうが、当該要素の下敷きになっているコンテンツは見えなくなります。
従ってopacityプロパティを与えない状態で正しく利用出来るようにする事が必要となります。
