CSSを使用した画像上のグラデーションの実装方法

背景画像としてのグラデーション: CSSのbackground-imageプロパティを使用して、画像の背景にグラデーションを追加できます。以下は例です。
```
.image-with-gradient {
 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url('image.jpg');
}
```
上記の例では、縦方向に透明から白へのグラデーションが追加されています。image.jpgは表示したい画像のファイルパスに置き換えてください。
オーバーレイとしてのグラデーション: グラデーションを画像の上にオーバーレイとして表示することもできます。以下は例です。
```
.image-container {
 position: relative;
}
.gradient-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
```
上記の例では、.image-containerクラスが画像の親要素であり、.gradient-overlayクラスがグラデーションを表示するオーバーレイ要素です。適切な要素にこれらのクラスを適用し、必要に応じてスタイルを調整してください。

SVGを使用したグラデーション: もう一つの方法は、SVGを使用して画像上にグラデーションを描画することです。以下は例です。

<div class="image-container">
 <img src="image.jpg" alt="Image">
 <svg class="gradient-overlay" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   <defs>
     <linearGradient id="gradient" gradientTransform="rotate(90)">
       <stop offset="0%" stop-color="rgba(255, 255, 255, 0)"/>
       <stop offset="100%" stop-color="rgba(255, 255, 255, 1)"/>
     </linearGradient>
   </defs>
   <rect width="100" height="100" fill="url(#gradient)"/>
 </svg>
</div>

上記の例では、.image-containerクラスが画像とSVGを含む要素です。SVG内で線形グラデーションを定義し、<rect>要素を使用して画像上に描画しています。

これらはいくつかの基本的な方法ですが、実際にはさまざまな方法でグラデーションを画像上に表示することができます。デザインの要件に合わせて最適な方法を選択し、必要に応じてスタイルやパラメータを調整してください。