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

背景画像への CSS グラデーションのオーバーレイ

多くの開発者は、背景画像と線形グラデーションを同時に表示しようとすると困難に遭遇します。目標は、背景の下部に、通常は黒から透明への段階的な移行を作成することです。ただし、ほとんどの場合、グラデーションまたは画像のみが表示され、両方は表示されません。

この問題の解決策は、背景スタイルで要素の順序を正しく指定することです。画像にグラデーションを適切にオーバーレイするには、次の改訂された構文に従います。

body {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,1))),
  url("http://www.skrenta.com/images/stackoverflow.jpg") no-repeat;
}

背景画像の URL を行末に配置することで、背景画像の URL がグラデーションの下に表示され、両方の要素が表示されるようになります。表示されます。

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