2つの背景画像を使用することは可能ですか？たとえば、1つの画像を上部で繰り返して（repeat-x）、別の画像をページ全体で繰り返し（繰り返し）、ページ全体で1つの画像を上部で繰り返す画像の後ろに配置したいとします。
htmlとbodyの背景を設定することで、2つの背景画像に望ましい効果が得られることがわかりました。
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
これは「良い」CSSですか？より良い方法はありますか？また、3つ以上の背景画像が必要な場合はどうなりますか？
回答:
CSS3はこの種のものを許可し、次のようになります。
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}すべての主要ブラウザーの現在のバージョンでサポートされていますが、IE8以下をサポートする必要がある場合は、追加のdivを用意することで回避できます。
<body>
<div id="bgTopDiv">
content here
</div>
</body>body{
background-image: url(images/bg.png);
}
#bgTopDiv{
background-image: url(images/bgTop.png);
background-repeat: repeat-x;
}1つのdivで2つの異なる背景画像を使用するのに最も簡単な方法は、次のコード行です。
body {
background:url(image1.png) repeat-x, url(image2.png) repeat;
}言うまでもなく、これはWebサイトの本体だけでなくてもかまいません。好きなdivに使用できます。
お役に立てば幸いです。私のブログには、誰かがさらに指示や助けを必要とする場合、これについてもう少し詳しく説明する投稿があります-http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div。
これを使って
body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}background-positionを使用してすべての画像の位置を調整する簡単な方法：background-repeatを使用して繰り返しプロパティを設定：すべての画像を個別に
FFとIEの現在のバージョンと他の一部のブラウザーは、1つのCSS2宣言で複数の背景画像をサポートしています。ここhttp://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/とここhttp://www.quirksmode.org/css/multiple_backgrounds.htmlとここhttp：/を見てください。/nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
IEの場合、動作を追加することを検討できます。ここを見てください：http : //css3pie.com/
はい、それは可能であり、人気のあるユーザビリティテストWebサイトSilverbackによって実装されています。ソースコードを見ると、背景が複数の画像で構成されており、それらが互いに重なり合っていることがわかります。
これはビタミンで見つけることができる効果を行う方法を示す記事です。これらの「オニオンスキン」レイヤーをラップするための同様の概念は、A List Apartにあります。
複数の背景画像が必要だが、それらを重ねたくない場合は、次のCSSを使用できます。
body {
font-size: 13px;
font-family:Century Gothic, Helvetica, sans-serif;
color: #333;
text-align: center;
margin:0px;
padding: 25px;
}
#topshadow {
height: 62px
width:1030px;
margin: -62px
background-image: url(images/top-shadow.png);
}
#pageborders {
width:1030px;
min-height:100%;
margin:auto;
background:url(images/mid-shadow.png);
}
#bottomshadow {
margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}
#page {
text-align: left;
margin:62px, 0px, 20px;
background-color: white;
margin:auto;
padding:0px;
width:1000px;
}このHTML構造で：
<body
<?php body_class(); ?>>
<div id="topshadow">
</div>
<div id="pageborders">
<div id="page">
</div>
</div>
</body>#example1 {
background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
padding: 15px;
background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>CSS3を使用して複数の画像を簡単に追加できます。詳細はこちらhttp://www.w3schools.com/css/css3_backgrounds.asp
トップの背景に1つの背景とメインページの別のdivを設定し、それらの間でページコンテンツを分離するか、コンテンツを別のzレベルのフローティングdivに配置できます。あなたがそれをしている方法はうまくいくかもしれませんが、私が遭遇するすべてのブラウザでうまくいくとは思えません。