背景画像のみを透過する方法

プログラミングの勉強日記

2020年6月6日　Progate Lv.83
ウェブページ制作中
背景画像を透過させたいのに、すべての要素が透過されてしまった。

opacityを背景画像のみに適用する

html

<div class="backgroundImage">
  <h1>背景画像だけにopacityを適用</h1>
</div>

css

.backgroundImage{
  background-image:url("./photo/image.png");
  opacity:0.4;
}

　このように指定すると、<h1>にまでopacityが適用してしまう。そこで、 背景画像の上にrgbaを置いて背景画像だけを透過させるように見せる。

html

<div class="backgroundImage">
  <div class="tentativeImage>
 　　 <h1>背景画像だけにopacityを適用</h1>
  </div>
</div>

css

.backgroundImage{
  background-image:url("./photo/image.png");
}
.tentativeImage{
    /* 背景画像の上にrgbaを置いて背景画像のみを透過させる */
    background: rgba(255,255,255,0.5); 
}