More than 5 years have passed since last update.

cssで背景だけを透過する方法(文字列は透過しない)

Posted at 2015-09-01

背景だけを透過して、文字列は透過したくないっていう時、普通に要素の背景をopacityとか使って透過してしまうと文字列まで透過してしまいます。

これを防ぐ為には、rgbaを使って、透過させると背景だけを透過させることが出来ます。

<div class="all_back">
    <p>opacityを使うと文字まで透過される</p>
</div>

<div class="only_back">
    <p>rgbaを使うと、背景だけ透過に出来る</p>
</div>

div.all_back p {
    background: red;
    opacity: 0.3;
}

div.only_back p {
    background: rgba(255,0,0,0.3);
}

実際に動かしたイメージを↓に乗せてみたので参考にしてみてください。