CSSで2つの背景を重ねる方法

藏色散人
リリース: 2022-12-30 11:11:32
オリジナル
3919 人が閲覧しました

2 つの背景を重ねる Css メソッド: まず HTML サンプル ファイルを作成し、次に [background-image:url(画像アドレス),url(画像アドレス);] を使用して 2 つの背景画像を重ねます。

CSSで2つの背景を重ねる方法

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

推奨: css ビデオ チュートリアル

css では、background-image:url (画像アドレス), url (画像アドレス); を使用して 2 つの背景を作成できます。画像が重なって表示されます。

このように、2 つの形状をブレンドして美しいものを作るというアイデアがあると、素晴らしい結果が得られます。

例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
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;
}
</style>
</head>
<body>
<!--   Your content here -->
</body>
</html>
ログイン後にコピー

レンダリング:

CSSで2つの背景を重ねる方法

以上がCSSで2つの背景を重ねる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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