可以有两个背景图像吗?例如,我想让一个图像在顶部重复( repeat -x),并在整个页面上重复另一个( repeat ),其中整个页面上的图像在顶部重复的图像后面。
我发现通过设置html和body的背景可以达到两张背景图片想要的效果:
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
这是“好的”CSS吗?有没有更好的方法?如果我想要三张或更多的背景图片呢?
发布于 2009-01-08 03:45:23
CSS3允许这种事情,它看起来是这样的:
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
但是,如果您需要支持IE8或更低版本,那么您可以解决的最好方法是使用额外的The current versions of all the major browsers now support it:
<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;
}
发布于 2011-03-11 10:48:28
我找到的在一个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。
发布于 2013-07-23 16:27:11
使用这个
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;
}
一种简单的方法来调整每个图像的位置与背景位置:和设置重复属性与背景-重复:为每个图像单独
https://stackoverflow.com/questions/423172
复制相似问题