CSSで画像を半透明にする
CSSで画像等を半透明にして表示する方法を紹介します。
１．サンプル
まずはサンプルをご覧ください。
通常の表示
半透明の表示
半透明の表示が確認できているのは Windows+IE/Firefox/Opera/Safari/Google Chromeです（2012年10月現在）。
２．半透明にするCSS
まず、以下のようなimg要素を用意します。
<img src="画像のURL" class="hogehoge" />次に、半透明にしたい画像のスタイルに、filterプロパティ、-moz-opacityプロパティ、opacityプロパティを追加します。クラスセレクタは任意の名称をつけてください。
.hogehoge {
filter: Alpha(opacity=50); /* IE系 */
-moz-opacity: 0.5; /* Mozzila系 */
opacity: 0.5;
}filterプロパティの「opacity=50」は透明度の割合を100を100%として指定します。-moz-opacityプロパティ、opacityプロパティの「0.5」は、透明度の割合を1を100%として指定します。
最新のブラウザであればopacityプロパティのみで表現できますが、古いブラウザに対応させる場合はfilterプロパティ、-moz-opacityプロパティも加えてください。
ここではimg要素に対して透明度を与えましたが、背景画像でも同様のことが実現できます。
2012.10.03
本文を修正しました。
- YouTube動画にキャプションをつけてテキストを回り込ませる方法
- 画像を下揃えにしてテキストを回り込ませる方法
- style要素にCSSの擬似要素は記述可能か？
- position:relativeを設定すると他の要素がずれる場合の対処
- CSSでタブ切り替えする方法
- :target擬似クラスのまとめ
- CSSでヘッダを固定したスクロールテーブルを作る方法
- レスポンシブウェブデザインで画像を縮小する方法
- disabledなボタンのhoverのスタイルを無効にする方法
- HTML要素を別の要素を基点にしてCSSで絶対配置する方法
- :not擬似クラスでCSS3のサポートをチェックする方法
- :checked擬似クラスでチェックボックスに連動して要素を表示させる方法
- ol要素の入れ子で親の番号を子に割り当てる方法
- チェックボックスやラジオボタンを大きくする方法
- CSSで中央に配置する方法
≫ 画像を半透明にするCSS from 鯵、環境民俗学ヲ嗜ム
CSSの独自拡張ってのはいろいろあるわけですが、これを使うか否かにもまた賛否両論様々ある。 ユーザーにWebブラウジングの主権を渡すことができるのが、CSS... [続きを読む]
こんばんは。
いきなりですが、ありがとうございます♪
画像の半透明で使えるのはおぼろげながら知っていたんですが・・・・・実は、IEでPOPUP表示の半透明化をどうすればできるか？と悩んでいました（opacityだけでは半透明にならない）。
で、何気にこのエントリーを読ませてもらって「もしかしたらfilterなら使える？」と思って実行してみました！
見事できてしまいました＾＾
私も半透明はIEしか有効にならないと「固く」信じていました(^^;。実際、先日検索してたどりついた「半透明にする方法」は、どれもFirefoxで見ると全然なっていなかったし…。
今こちらを拝見したらきちんと半透明になっているので驚きました。
先日来「ぜひ使いたい」と思っていた方法なので、とても助かります。ありがとうございました。
＞WINDさん
こんばんは。
ご利用ありがとうございます。
うまくできたようでよかったです。
＞かれんさん
こんばんは。
記事参照ありがとうございます。
お役に立てたようでなによりです。
初めまして。リクと言います。
seesaaブログを使用してます。
カスタマイズについてご質問させて下さい。
背景は黒にして800×600の写真を使用してます。
記事の部分を黒の半透明にしたいのですが、上手くいきません。
これは可能なのでしょうか？
スタイルシートのwidth:750px;の下にtable{ filter:alpha(opacity=85)}
を入力したのですが、半透明では無く完全な透明になってしまいました。
もし出来たとしてもプラウザに負荷が高くて重くなるのでしょうか？
よろしければお答えして頂ければ嬉しいです。
＞リクさん
こんばんは。
ご質問の件ですが、以下のような感じでどうでしょう？
http://www.koikikukan.com/test/20090215/
.blogbodyに以下を追加しました。
background:#000;
filter: Alpha(opacity=70);
opacity:0.7;
また、table{ filter:alpha(opacity=85)} はCSS解析エラーになるので削除しています。
詳細は上記のサンプルからスタイルシートを取得して、参照してください。
それではよろしくお願い致します。
: February 15, 2009 11:19 PMお忙しいところレスありがとうございます。
大変感謝してますm(__)m
それでサンプルのブログ拝見しました。
自分のプラウザはＩＥ７なのですが、半透明では無く、背景が完全な黒に見えます。
後、ご指摘のbackground:#000;
filter: Alpha(opacity=70);
opacity:0.7;
をスタイルシートのwidth:750px;の下に入力したのですが、
一瞬半透明になりまして、後は完全に消えて背景で使用してる写真だけ表示されました。
ご指摘のtable{ filter:alpha(opacity=85)} は消した状態で入力しました。
＞リクさん
こんばんは。
考慮不足ですいません。が、ご質問の完成イメージを知りたいので、Firefox や Google Chrome 等で表示をご確認頂ければ幸いです。
（ただしIEがうまく表示できていない件は解決できないかもしれません）
それではよろしくお願い致します。
: February 18, 2009 12:44 AMお手数おかけしてますm(__)m
Firefoxで確認しました。半透明になってますね。
完成イメージはこの通りです。
ＩＥでは無理があるのでしょうか？
お忙しいところ大変申し訳なく思ってます。
