cssで背景を半透明 (opacityとrgbaについて)

画像や文字を半透明にするには、今まではpngで書き出してましたが、それらはcss3で出来るようになりました。便利ですねー。

sectionに背景#fffでopacity:0.4にするとこうなる。
opacity

sectionの中にあるhlとか画像とか全部が半透明。

文字や画像はそのままで、背景色の白だけ半透明にするにはopacityではなく、
sectionの背景色をrgbaで指定!

できた。
rgba

cssのopacityとrgbaについては、ググればたくさん出てきますので、自分で調べて下さい。

ie8は非対応です。半透明が適応されず、べた塗りになります。ガビーン。
ie8

対処としては、半透明png画像を用意してie8専用のcss(ie8.css)を作り、
指定するのが良いと思います。


これをhtmlのheadの中に書きます。ie8はこれを読むので、ie8だけにie8.cssが適応されます。
firefoxやchromeといったie8以外のブラウザは無視します。
一度読んだ上で無視するのではなく、最初から読まずに無視するので、負荷になりません。

この方法はie7でも同様に使えます。

カテゴリー: 勉強会 | タグ: , | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

cssで背景を半透明 (opacityとrgbaについて)」への2件のフィードバック

  1. ピンバック: 2013 8-9 勉強会 | パソコン倶楽部りんご

  2. ピンバック: 2013 8-9 勉強会 | パソコン倶楽部りんご

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA