0

如何使用 CSS 垂直和水平重复第一个背景图像，并仅水平重复第二个背景图像？我希望它不依赖于 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 
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 回答
0

看看CSS3 多背景。自 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>

这可能是可用的各种解决方案之一。

于 2012-10-19T14:52:58.667 回答