0

CSSを使用して、最初の背景画像を垂直方向と水平方向の両方に繰り返し、2番目の背景画像をちょうど水平方向に繰り返すにはどうすればよいですか？CSS3に依存しないようにしたいと思います。

次のことを試しましたが、成功しませんでした。

body {
    font-family:Verdana, Geneva, sans-serif;
    position:relative;
    z-index:1;
}
body:before,
body:after {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
body:after {
    background-image:url('../images/bg.png');
    background-repeat:repeat;
}
body:before {
    background-image:url('../images/top-bg.png');
    background-repeat:repeat-x;
}
4

2 に答える 2

0

CSS3 multiple backgroundsを見てください。Firefox 3.6、Safari 1.3、Chrome 10、Opera 10.50、Internet Explorer 9.0 以降でサポートされています。

IE8 以前をサポートする必要がある場合 ( Google は来月から IE8 のサポートを終了することに注意してください)、画像を 1 つに結合するか、複数の要素をオーバーレイします。

<!doctype html>
<html>
 <head>
    <style type="text/css">
    #tile, #logo { 
       padding:0; 
       margin:0; 
       border:0; 
       position:absolute; 
       top:0; 
       left:0; 
       right:0; 
       bottom:0;
    }
    #tile{ 
       background-image:url('http://upload.wikimedia.org/wikipedia/commons/e/e7/Procedural_Texture.jpg'); 
       background-repeat:repeat;
    }
    #logo{ 
       background-image:url('http://upload.wikimedia.org/wikipedia/en/9/95/Stack_Overflow_website_logo.png'); 
       background-repeat:repeat-x;
    }
    </style>
 </head>
 <body>
<div id="tile"></div>
<div id="logo"></div>
 </body>
</html>

これは、利用可能なさまざまなソリューションの 1 つです。

于 2012-10-19T14:52:58.667 に答える
0 
mydiv
{
background-image:url('myimage.jpg');
background-repeat:repeat;
}

...両方の軸で行います

mydiv
{
background-image:url('myimage.jpg');
background-repeat:repeat-x;
}

...横向きにします。

これがあなたの求めているものだと思います。あなたの質問は過度に具体的ではありません。達成しようとしていることをより明確に述べてもらえますか?

于 2012-10-19T14:42:25.490 に答える