CSSでの画像上のグラデーションの作成方法

背景画像にグラデーションを追加する方法:

<div class="gradient-image">
  <img src="your-image.jpg" alt="Your Image">
</div>

.gradient-image {
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url(your-image.jpg);
  background-size: cover;
  background-blend-mode: overlay;
  width: 100%;
  height: 100%;
}

上記のコードでは、.gradient-image クラスに linear-gradient プロパティを使用してグラデーションを定義し、url プロパティで背景画像を指定しています。background-blend-mode プロパティは、グラデーションと画像のオーバーレイを設定し、透明なグラデーションから不透明な黒に徐々に変化する効果を作り出します。

画像に重ねる形でグラデーションを作成する方法:

<div class="gradient-overlay">
  <img src="your-image.jpg" alt="Your Image">
  <div class="overlay"></div>
</div>

.gradient-overlay {
  position: relative;
  display: inline-block;
}
.gradient-overlay .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
}

上記のコードでは、.gradient-overlay クラスに position: relative を設定し、position: absolute を持つ .overlay 要素を追加しています。.overlay 要素に linear-gradient プロパティを使用してグラデーションを定義し、画像の上に重ねて表示されるようにします。

これらは一部の方法ですが、CSSを使用して画像上にグラデーションを作成する方法を示しています。デザインや要件に応じて、他のプロパティや値を調整することもできます。