CSS グラデーションオーバーレイが背景画像の上に表示されないのはなぜですか?-CSSチュートリアル-php.cn

CSS グラデーションオーバーレイが背景画像の上に表示されないのはなぜですか?

Mary-Kate Olsen

リリース： 2024-12-04 05:46:10

オリジナル

405 人が閲覧しました

Why Doesn't My CSS Gradient Overlay Appear Over My Background Image?

背景画像のグラデーションオーバーレイ: CSS の難題を解決しました

エレガントなフェード効果を得るために背景画像にグラデーションオーバーレイを適用しようとすると、不可解な仕事になるだろう。 CSS でグラデーションと画像の両方を指定しているにもかかわらず、1 つのレイヤーしか表示されないようです。

この問題を解決するには、コード構造を修正し、背景画像の 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;
}

ログイン後にコピー

この変更により、背景画像が確実にグラデーションレイヤーの上に配置され、シームレスなブレンドが得られます。

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