cssで背景だけを透明にする方法

nerimanKWS
2013.08.26

opacityとrgbaの違い

案件で、ページにアクセスした際に上からホバーウインドウが降りてくる機能を実装することになりました。その際、背景だけを半透明したかったですが、思いのほか解決に手こずったので備忘録としてメモを残しておきます。

完成予想図は次のような状態です。

「透明といえばCSSでopacityを0.5ぐらいに指定すればいいだけだな」

と下記のコードをササッと書いてみた。

<div id="lp-ad" style="position: fixed; left: 50%; margin-top: -500px; margin-left: -323px; padding: 20px; background-color: #0000FF; opacity: 0.5; ">
    <a href="http://www.kurosawakoumuten.co.jp/lp/" target="_blank"><img src="./images/top/top_p1.jpg" width="646" height="395" /></a>
</div>

「フフフ、これでこの案件は片付いたぞ」

などと、時計をチラ見して悦に入って数秒後、ブラウザに目を戻した。

しかし、そこには悲しいことに背景と一緒に中央の画像まで半透明になったホバーウインドウが現れた。

「opacityではダメなのか？それとも外側にもう一個divで囲えばいいのだろうか？」

そこで、次のようなコードを書いてみたが状況は改善されなかった。

<div id="lp-ad" style="position: fixed; left: 50%; margin-top: -500px; margin-left: -323px; padding: 20px;”>
    <div style=”background-color: #0000FF; opacity: 0.5; ">
        <a href="http://www.kurosawakoumuten.co.jp/lp/" target="_blank"><img src="./images/top/top_p1.jpg" width="646" height="395" /></a>
    </div>
</div>

「なぜ、ここまでしてやっているのに子要素まで半透明になってしまうのだ」
「ひょっとして、opacityに不透明度を表す数字以外のパラメータでもあるのだろうか？」

そう思い、思いつくままにパラメータを入れてみた。

<div id="lp-ad" style="position: fixed; left: 50%; margin-top: -500px; margin-left: -323px; padding: 20px;”>
    <div style=”background-color: #0000FF; opacity: 10px ; ">
        <a href="http://www.kurosawakoumuten.co.jp/lp/" target="_blank"><img src="./images/top/top_p1.jpg" width="646" height="395" /></a>
    </div>
</div>

「ぐぬぬ、cssエラーが発生してるようだ。line-heighみたいにはいかないのか」

PC画面の右下にある時計を見てみる。
悩み始めてから、もうかれこれ１時間近くが経過しようとしている。
もう時間がない。どうしよう（汗）

観念して、グーグル先生に聞く事にした。

「グーグル先生、cssで背景だけを半透明にするにはどうすればいいのですか？」
すると、グーグル先生はこうおっしゃった。

(･｀ω´･)⊃「背景だけを半透明にするにはopacityでなく、rgbaを使うのだ。ただし、IE８ではfilterプロパティも併記する必要があるので気をつけるのだぞ」

なるほど、背景だけを半透明にするにはopacityではなくrgbaを使うのか。さすがグーグル先生だ。
しかし、今回はIE8対応は気にしなくていい案件だったので頂いたアドバイスは心に奥底にしまっておくことにした。

では、opacityをrgbaに変えて書き直すことにしよう。

<div id="lp-ad" style="position: fixed; left: 50%; margin-top: -500px; margin-left: -323px; padding: 20px; background-color: rgba(0, 0,255, 0.5); ">
   <a href="http://www.kurosawakoumuten.co.jp/lp/" target="_blank"><img src="./images/top/top_p1.jpg" width="646" height="395" /></a>
</div>

どりゃっと気合を入れてF5を連打！！

やった！今度は成功だ！

こうして１時間ちょっとに渡る戦いが終わった。グーグル先生ありがとう。<(_ _*)>

まとめ

背景だけを半透明にするにはopacityではなく、rgbaを使う。
opacityは透明度を指定することができるスタイルで、子要素を含めて透明になる。
一方、rgbaは色とその透明度をしているすることができ、自要素は透明になるが子要素は透明にならない。

opaticyの書き方例

#box {
    color: #000000;
    background-color: #0000FF;
    opacity: 0.5;
}

半透明になるのは背景と文字の両方である。

rgbaの書き方例

#box {
    color: #000000;
    background-color: rgba(0, 0, 255, 0.5)
}

rgbaでは半透明になるのは青色の背景だけで、文字は不透明なままである。

執筆者：カニ
事務所のテラスに置いてある朝顔のプランターにアオムシを発見。しばらくぶりにアオムシを見たのでしばらく観察することに。すると、自分の体の２倍以上のある大きな葉っぱをムシャムシャ食べ始めた様子。しかも、パワーエサを食べたパックマンの如く猛スピード！速い、速い！２分たってもまだ食べ続けている・・・

アオムシの本気を見て、「負けられないな」と思った残暑のある一日でした。