背景画像にカラーオーバーレイを追加する方法

方法1: 擬似要素 (::before もしくは ::after を使用) この方法では、擬似要素を使用して背景画像の上にカラーレイヤーを作成します。

HTML:

<div class="container">
  <h1>Hello, World!</h1>
</div>

CSS:

.container {
  position: relative;
  background-image: url('背景画像のURL');
  background-size: cover;
  width: 100%;
  height: 400px; /* 適宜調整 */
}
.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* オーバーレイの色と不透明度を指定 */
}

方法2: ボックスシャドウを利用する方法 この方法では、ボックスシャドウを使用して背景画像にカラーオーバーレイを追加します。

HTML:

<div class="container">
  <h1>Hello, World!</h1>
</div>

CSS:

.container {
  background-image: url('背景画像のURL');
  background-size: cover;
  width: 100%;
  height: 400px; /* 適宜調整 */
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5); /* オーバーレイの色と不透明度を指定 */
}

これらの方法を使用すると、背景画像の上に透明度を持つカラーオーバーレイを追加することができます。適宜、背景画像のURLやオーバーレイの色、不透明度を変更して、デザインに合わせて調整してください。