画像を半透明にする

灰色背景がサンプルソース

サンプルソース

HTMLソース

CSSソース

CSSソース

.mozimg {
filter:Alpha(opacity=20); /* IE用 */
-moz-opacity:0.2; /* Mozilla,ネスケ用 */
opacity:0.2; /* Safari用 */
}

サンプル表示

→画像を半透明にする(サンプル)

解説

HTMLソース

半透明にしたい画像にのみ適用させる為、画像にclassを指定します。
ここでは、<img class="mozimg"/>としています。

CSSソース

半透明にするのに、ブラウザによって書き方がまだ統一されていません。その為、ブラウザ毎に別の記述をしなければなりません。

filter:Alpha(opacity=20);
ブラウザ「InternetExplorer」用の指定方法。opacity=20の20部分の数字によって透明度が変わります。
0～100の数字が指定でき、0なら完全に透明(見えない)、100ならくっきりと表示されます。

-moz-opacity:0.2;
ブラウザ「Mozilla」「FireFox」「Netscape」用の指定方法。-moz-opacity:0.2の0.2部分の少数の数字によって透明度が変わります。
0.0～1.0の数字が指定でき、0.0なら完全に透明(見えない)、1.0ならくっきりと表示されます。

opacity:0.2;
ブラウザ「Safari」用の指定方法。opacity:0.2;の0.2部分の少数の数字によって透明度が変わります。
0.0～1.0の数字が指定でき、0.0なら完全に透明(見えない)、1.0ならくっきりと表示されます。

将来的には書き方が統一されることを願うばかりですが、まだ暫くはこの3つを並べて書いておく必要がありそうです。

ちなみに、上の画像部分を文字に変えれば半透明な文字が出来上がります。可読性(読みやすいか)を考えた上で、デザイン上必要なら使ってみるとよいでしょう。