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

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

こんにちは、mickです。

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

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

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

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

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

  1. opacityではだめなワケ
  2. 実際に使うのはrgba
  3. 背景に画像を使ってても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);
}

まとめ。

CSSで背景(画像も)だけを透過するやり方を紹介しました。

HTMLが階層構造であることを理解できれば、この透過の仕組みもすぐに理解できると思います。
不明な点などがありましたら、お問い合わせかTwitterで教えてください。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/02/12

タイトルとURLをコピーしました