2014/02/06

CSSで透過を子要素に継承させないようにする方法

CSSで透過を子要素に継承させないようにする方法

CSSで背景をopacityプロパティで透過した場合、その子要素にテキストなどをマークアップしていると透過が継承され、一緒に薄くなってしまいます。opacityプロパティは子要素に再度opacity=1を設定しても反映されません。これは透過をopacityプロパティではなくrgba()のalphaで設定をすることで回避することができます。

サンプルを用意しましたので、同じようなことでハマってしまった方は参考にしていただけると幸いです。

目次

opacityプロパティでは対応できない

opacityプロパティはオブジェクト全体に対して適応されるため、子要素にopacityプロパティを設定してもその設定は適応されません。これは!importantを設定しても回避することはできません。

HTML

<div class="sample">
    <div>
        <h1>サンプルテキスト</h1>
    </div>
</div>

CSS

.sample {
    background-image: url(images/sample.jpg);
}

.sample div{
    background-color: #2d2d2d;
    padding: 20px;
    opacity: 0.5;
}

.sample h1{
    color: #fff;
}

サンプル

サンプルテキスト

背景色と同様にテキストにも透過が適応され、視認性が悪くなっています。

rgba()で対応

これを回避するにはopacityプロパティではなく、rgba()を用いて背景色にalpha値を設定します。

HTML

<div class="sample">
    <div>
        <h1>サンプルテキスト</h1>
    </div>
</div>

CSS

.sample {
    background-image: url(images/sample.jpg);
}

.sample div{
    background: rgba(45,45,45, 0.5);
    padding: 20px;
}

.sample h1{
    color: #fff;
}

サンプル

サンプルテキスト

背景は透過されても、子要素のテキストは透過が適応されなくなります。

16進数から10進数への変換

普段のCSSコーディングでは#000000というように16進数で書いている方がほとんどだと思います。

rgba()を用いる場合、この16進数での表記から10進数表記に直さなければなりません。
そんなときに便利なサイトがあります。

RGB変換 (16進数→10進数) (16進数→10進数)

http://www.kitaq.net/lib/rgb/

数値を入力するだけで16進数の表記を10進数に変換してくれます。

まとめ

今回ご紹介したrgba()での透過はIE8以下には対応していません。IE8やIE7に対応するという場合は画像を使用するか、マークアップ方法を変更する方がブラウザごとの表示が統一されます。IE9以上の場合やスマートフォンサイトには問題なく使用できますので、リクエスト数を減らすためになるべく画像を使用したくない場合などにご利用下さい。