背景を半透明にする
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 では有効にならないようです。
- サブカテゴリーリストを定義型リストでマークアップする
- CSS でブログ本文の画像だけをセンタリングする
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
- グローバルナビゲーション（その1：基本スタイル）
- RSS フィードにスタイルシート（CSS）を適用する
- 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
- サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
- 公開テンプレートにフッタを追加する（2カラム版）
- CSS の after 擬似要素で回り込みを解除する
- テンプレートカスタマイズ支援ツール Column Resizer
- サイドバーのタイトル背景をカラム幅にあわせて表示する
- 公開テンプレートのサイドバーのカラム幅を変更する
- JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ
- CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
- CSSでブログに影をつける（ドロップシャドウ）
- IE7 の CSS ハック
- CSSでブロックレベル要素をセンタリングする
- 3カラムレイアウトをナビゲーションバー部分に適用する
≫ 画像を半透明にするCSS from 鯵、環境民俗学ヲ嗜ム
CSSの独自拡張ってのはいろいろあるわけですが、これを使うか否かにもまた賛否両論様々ある。 ユーザーにWebブラウジングの主権を渡すことができるのが、CSS... [続きを読む]
こんばんは。
いきなりですが、ありがとうございます♪
画像の半透明で使えるのはおぼろげながら知っていたんですが・・・・・実は、IEでPOPUP表示の半透明化をどうすればできるか？と悩んでいました（opacityだけでは半透明にならない）。
で、何気にこのエントリーを読ませてもらって「もしかしたらfilterなら使える？」と思って実行してみました！
見事できてしまいました＾＾
私も半透明はIEしか有効にならないと「固く」信じていました(^^;。実際、先日検索してたどりついた「半透明にする方法」は、どれもFirefoxで見ると全然なっていなかったし…。
今こちらを拝見したらきちんと半透明になっているので驚きました。
先日来「ぜひ使いたい」と思っていた方法なので、とても助かります。ありがとうございました。
＞WINDさん
こんばんは。
ご利用ありがとうございます。
うまくできたようでよかったです。
＞かれんさん
こんばんは。
記事参照ありがとうございます。
お役に立てたようでなによりです。
