画像を半透明にする

Tweet

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

CSSソース

サンプル表示

[参考]半透明にしていない、元の画像。

解説

HTMLソース

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

CSSソース

半透明にするのに、ブラウザによって書き方がまだ統一されていません。
その為、ブラウザ毎(現時点では、IEとそれ以外の2種類)で別の記述をしなければなりません。
filter:Alpha(opacity=20);
ブラウザ「InternetExplorer」用の指定方法。opacity=20の20部分の数字によって透明度が変わります。
0～100の数字が指定でき、0なら完全に透明(見えない)、100ならくっきりと表示されます。

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

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

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