Technology

[CSS]文字と画像を重ねてる時に、背景写真だけ暗くする

2021-01-12

背景写真だけ黒くする時のメモ

HTML

<div class="top-wrapper">
    <div class="container">
      <h1>TITLE</h1>
      <h3>Cozy experience in the forest</h3>
      <a href="#">Book</a>
    </div>
  </div>

top-wrapperとcontainerを用意。

CSS


.top-wrapper{
  background-image: url("./main.png");
  background-size: cover;
  padding:300px 0 400px 0;
 color: white;

 //position relativeに設定
  position: relative;
}


.top-wrapper::before{
 //どれだけ薄暗くしたいか設定
  background-color: rgba(0,0,0,0.3);
  content: '';

  //absoluteにして、各プロパティ0に設定すると、画像いっぱいに色が広がる。
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.container{
  width: 1170px;

 //中の要素をabsoluteで浮かせる
  position: absolute;
}

-Technology