【簡単】CSSで背景（背景画像）だけを透過するやり方【コピペOK】

こんにちは、mickです。

CSSで背景（背景画像）だけを透過するやり方を紹介する投稿です。

「透過だからopacityだと思ったけど、できない！」

そんな悩みを解決できます。

CSSで背景だけを透過する方法
まとめ。

CSSで背景だけを透過する方法

ここでは、大きく3つに分けて説明します。

opacityではだめなワケ
実際に使うのはrgba
背景に画像を使っててもrgba

opacityだと文字列も透過しちゃう

まず透過といえば思いつくのは、opacity。
これを指定してしまうと、文字まで透過してしまいます。

opacityを使うと背景と文字が透過する

<div class="use-opacity">
    <p>opacityを使うと背景と文字が透過する</p>
</div>

.use-opacity p {
    background: yellow;
    opacity: 0.3;
}

方法1：rgbaを使って背景だけ透過する

具体的には、rgbaを使います。
これで、背景だけを透過することができます。

rgba(R, G, B, O)のパラメーターは次のようにできています。

R：赤色（Red）の濃さ（0から255）
G：緑色（Green）の濃さ（0から255）
B：青色（Blue）の濃さ（0から255）
O：不透明度（Opacity）で（0.0から1.0）

濃さは、0が濃くて、255が薄いです。
不透明度は、1に近いほど不透明になります。

rgbaを使って背景だけ透過する

<div class="use-rgba">
    <p>rgbaを使って背景だけ透過する</p>
</div>

.use-rgba p {
    background: rgba(255,255,0,0.3);
}

方法2：背景画像もrgbで透過する

方法1を応用すると、背景に画像を使っていても、その画像を透過しているようにみせることができます。。

方法は、ひとつ階層を増やします。

backgroundを使って画像を背景にしたら、rgbaを使って背景画像を透過します。
3つのレイヤー（層）があるイメージ。
一番上に、文字列の層。
真ん中に、rgbaの透過背景の層。
一番下に、画像背景の層。

<div class="bg-image-style">
    <div class="use-rgba-image">
<p>backgroundを使って画像を背景にしたら、rgbaを使って背景画像を透過します。<br>
      3つのレイヤー（層）があるイメージ。<br>
      一番上に、文字列の層。<br>
      真ん中に、rgbaの透過背景の層。<br>
      一番下に、画像背景の層。
    </div>
  </div>

.bg-image-style {
  	background:#ffffff url('https://picsum.photos/200/300') no-repeat 100% bottom; 
	background-size: 200px; 
}
.use-rgba-image {
  background: rgba(255,255,255,0.7);
}