CSS で背景画像にグラデーションをオーバーレイするにはどうすればよいですか?

背景画像のグラデーション オーバーレイ: ソリューションの公開

背景画像とグラデーション オーバーレイの両方を同時に表示できないとイライラすることがあります。ただし、解決策は簡単で、CSS 宣言内の要素の正しい順序にあります。

背景の下部で黒から透明への望ましいフェード効果を実現するには、次の手順が重要です。

1. 背景画像の URL を行末に配置します: 直感に反して、背景画像の URL は行末に配置する必要があります。修正されたコードにあるグラデーション宣言:

.css {
  background: 
   linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
   url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;
}

2. 正しい構文を確認してください: サンプル コードには、グラデーション宣言の有効な CSS 構文が含まれています。複数のカラー ストップはかっこ内で定義され、グラデーションの開始位置と終了位置はパーセンテージを使用して指定されます。
3. コンテナの高さを指定します。 グラデーション効果が確実に表示されるようにするには、次のようにします。グラデーションと背景画像を含むコンテナ要素には高さを設定する必要があります。提供されたコードでは、「.css」要素の高さは 200 ピクセルです。

これらの調整を行うと、グラデーション オーバーレイが背景画像の上に正しく表示され、希望のフェード効果。

以上がCSS で背景画像にグラデーションをオーバーレイするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。