ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3 は Web ページへの複数の背景画像の追加をサポートしていますか?

CSS3 は Web ページへの複数の背景画像の追加をサポートしていますか?

青灯夜游
リリース: 2023-01-04 09:34:39
オリジナル
3526 人が閲覧しました

css3 は、Web ページへの複数の背景画像の追加をサポートしています。 CSS では、background-image 属性に複数の背景パスを直接指定することで、Web ページに複数の背景画像を追加できます。構文形式は、「background-image: url (画像アドレス), url (画像アドレス)...;」です。 「。」

CSS3 は Web ページへの複数の背景画像の追加をサポートしていますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS での複数の背景画像の使用

複数の画像を背景に追加したい場合はどうすればよいでしょうか?以下に示すように、複数のバックグラウンド パスを CSS3 で直接指定できます。

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}
ログイン後にコピー

レンダリング:

CSS3 は Web ページへの複数の背景画像の追加をサポートしていますか?

完全なアドレスの例: https : //codepen.io/duomly/pen/eYpVoJR

(学習ビデオ共有: css ビデオ チュートリアル

以上がCSS3 は Web ページへの複数の背景画像の追加をサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート