小粋空間: 背景を半透明にする

Top ＞ CSS ＞背景を半透明にする

2005年7月 1日

背景を半透明にする

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

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

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

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

半透明にしたい画像のスタイルに次の指定を追加します。クラスセレクタは任意の名称をつけてください

.hogehoge {
    filter: Alpha(opacity=50); /* IE系 */
    opacity:0.5; /* Mozzila系 */
}

img 要素は下記です。

<img src="画像のURL" class="hogehoge" />

opacity はそれぞれ不透明にする割合を指定します。
なお上記の設定で確認できているのは Windows・IE6.0/Netscape7.1/Firefox1.0 です。Opera では有効にならないようです。

Posted by yujiro このページの先頭に戻る

« どう知らそう？ | Main | カウンタ設置方法 »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバック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

: February 15, 2009 11:19 PM

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

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

後、ご指摘の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

: February 18, 2009 12:44 AM

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

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

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

[8] Posted by リク : February 18, 2009 11:47 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

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

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

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

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

Now loading...

Introduction

Entry Trackbacks

画像を半透明にするCSS
[鯵、環境民俗学ヲ嗜ム] 07/03 17:49

Entries of this Category

小粋空間 - a cheap joke and a play on words site

背景を半透明にする