CSSで画像を半透明にする

CSSで画像を半透明にする

Posted at July 1,2005 11:59 PM
Tag:[Background, CSS, Customize, Opacity, Semitransparent]

CSSで画像等を半透明にして表示する方法を紹介します。

1.サンプル

まずはサンプルをご覧ください。

通常の表示
ギターに入った猫

半透明の表示
ギターに入った猫

半透明の表示が確認できているのは Windows+IE/Firefox/Opera/Safari/Google Chromeです(2012年10月現在)。

2.半透明にする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
本文を修正しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

画像を半透明にするCSS from 鯵、環境民俗学ヲ嗜ム
 CSSの独自拡張ってのはいろいろあるわけですが、これを使うか否かにもまた賛否両論様々ある。  ユーザーにWebブラウジングの主権を渡すことができるのが、CSS... [続きを読む]

Tracked on July 3, 2005 5:49 PM
コメント

こんばんは。
いきなりですが、ありがとうございます♪

画像の半透明で使えるのはおぼろげながら知っていたんですが・・・・・実は、IEでPOPUP表示の半透明化をどうすればできるか?と悩んでいました(opacityだけでは半透明にならない)。
で、何気にこのエントリーを読ませてもらって「もしかしたらfilterなら使える?」と思って実行してみました!
見事できてしまいました^^

[1] Posted by WIND : July 2, 2005 2:59 AM

私も半透明はIEしか有効にならないと「固く」信じていました(^^;。実際、先日検索してたどりついた「半透明にする方法」は、どれもFirefoxで見ると全然なっていなかったし…。

今こちらを拝見したらきちんと半透明になっているので驚きました。

先日来「ぜひ使いたい」と思っていた方法なので、とても助かります。ありがとうございました。

[2] Posted by かれん : July 2, 2005 10:04 AM

>WINDさん
こんばんは。
ご利用ありがとうございます。
うまくできたようでよかったです。

>かれんさん
こんばんは。
記事参照ありがとうございます。
お役に立てたようでなによりです。

[3] Posted by yujiro : July 2, 2005 11:58 PM

初めまして。リクと言います。

seesaaブログを使用してます。
カスタマイズについてご質問させて下さい。

背景は黒にして800×600の写真を使用してます。
記事の部分を黒の半透明にしたいのですが、上手くいきません。
これは可能なのでしょうか?
スタイルシートのwidth:750px;の下にtable{ filter:alpha(opacity=85)}
を入力したのですが、半透明では無く完全な透明になってしまいました。

もし出来たとしてもプラウザに負荷が高くて重くなるのでしょうか?

よろしければお答えして頂ければ嬉しいです。


[4] Posted by リク : February 9, 2009 11:48 PM

>リクさん
こんばんは。
ご質問の件ですが、以下のような感じでどうでしょう?
http://www.koikikukan.com/test/20090215/

.blogbodyに以下を追加しました。

background:#000;
filter: Alpha(opacity=70);
opacity:0.7;

また、table{ filter:alpha(opacity=85)} はCSS解析エラーになるので削除しています。

詳細は上記のサンプルからスタイルシートを取得して、参照してください。
それではよろしくお願い致します。

[5] Posted by yujiro logo : February 15, 2009 11:19 PM

お忙しいところレスありがとうございます。
大変感謝してますm(__)m

それでサンプルのブログ拝見しました。
自分のプラウザはIE7なのですが、半透明では無く、背景が完全な黒に見えます。

後、ご指摘のbackground:#000;
filter: Alpha(opacity=70);
opacity:0.7;
をスタイルシートのwidth:750px;の下に入力したのですが、
一瞬半透明になりまして、後は完全に消えて背景で使用してる写真だけ表示されました。

ご指摘のtable{ filter:alpha(opacity=85)} は消した状態で入力しました。

[6] Posted by リク : February 16, 2009 9:07 PM

>リクさん
こんばんは。
考慮不足ですいません。が、ご質問の完成イメージを知りたいので、Firefox や Google Chrome 等で表示をご確認頂ければ幸いです。
(ただしIEがうまく表示できていない件は解決できないかもしれません)
それではよろしくお願い致します。

[7] Posted by yujiro logo : February 18, 2009 12:44 AM

お手数おかけしてますm(__)m

Firefoxで確認しました。半透明になってますね。
完成イメージはこの通りです。

IEでは無理があるのでしょうか?
お忙しいところ大変申し訳なく思ってます。

[8] Posted by リク : February 18, 2009 11:47 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)