是否可以有两个背景图像？例如,我希望在顶部重复一个图像(repeat-x),并在整个页面上重复另一个图像(重复),整个页面上的一个重复在顶部重复.
我发现通过设置html和body的背景,我可以达到两个背景图像的效果:
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
这是"好"的CSS吗？有更好的方法吗？如果我想要三个或更多背景图像怎么办？
CSS3允许这种事情,它看起来像这样:
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
所有主流浏览器的当前版本现在都支持它,但是如果你需要支持IE8或更低版本,那么解决它的最好方法是有额外的div:
content here
body{
background-image: url(images/bg.png);
}
#bgTopDiv{
background-image: url(images/bgTop.png);
background-repeat: repeat-x;
}
我发现在一个div中使用两个不同背景图像的最简单方法是使用以下代码行:
body {
background:url(image1.png) repeat-x, url(image2.png) repeat;
}
显然,这不仅仅是网站的主体,你可以使用它为你想要的任何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:为每个图像单独设置repeat属性
当前版本的FF和IE以及其他一些浏览器在单个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/
京公网安备 11010802040832号 | 京ICP备19059560号-6 