如何提供两个备用背景图像？
[英]How to give two alternate background images?
问题描述
css code 
css代码
body {
background-color: rgb(224,224,224,0.6);
background: url(../img/backlogo.png),url(../img/backlogo2.png);
}
I want to give two background images one after the other alternately.I have shown the output in the 我想一个接一个地交替给出两个背景图像。我已经显示了输出 .
。 I want the two images repeated one next to other. 我希望这两个图像一个接一个地重复。
7 个解决方案
解决方案1
2 已采纳 2015-12-09 05:51:51
Try something like this 尝试这样的事情
body { background-color: rgb(224, 224, 224, 0.6); background: url(https://upload.wikimedia.org/wikipedia/commons/c/c3/Acid2.png), url(http://easycarkeys.com/images/accept.png); background-repeat: no-repeat, no-repeat; background-position: right center, left center; height:250px; }
Ref : Using CSS multiple backgrounds 参考： 使用CSS多个背景
UPDATE : To avoid overflow set background position based the width and height of other background image 更新：根据其他背景图像的宽度和高度，避免溢出设置背景位置
body { background-color: rgb(224, 224, 224, 0.6); background: url(https://upload.wikimedia.org/wikipedia/commons/c/c3/Acid2.png), url(http://easycarkeys.com/images/accept.png); background-repeat: no-repeat, no-repeat; background-position: 200px center,left center; height:250px; }
解决方案2
0 2015-12-09 05:55:49
Try Something like, 尝试类似的东西，
body {
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
解决方案3
0 2015-12-09 05:58:54
Here is an example making multiple background images using css, CSS3 Backgrounds 下面是使用css， CSS3 Backgrounds制作多个背景图像的示例
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
解决方案4
0 2015-12-09 05:58:55
This works wonders for me: 这对我来说很有意义：
body {
background: url("images/bgInit1C.gif") no-repeat scroll 0px 0% transparent url("images/bgInit1Repeat.gif") repeat-y scroll 0px 0px;
}
With this code, the two images overlap, but you can change their xy values for different positioning. 使用此代码，两个图像重叠，但您可以更改其xy值以进行不同的定位。
解决方案5
0 2015-12-09 06:00:48
CSS3 allows this sort of thing and it looks like this:
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:
<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;
}
解决方案6
0 2015-12-09 06:03:38
Here is the working demo. 这是工作演示。
You gotta give background-position to stack the background image 你必须给出background-position来叠加背景图像
body { background: url(http://s3-media1.fl.yelpcdn.com/bphoto/y2kT6dH4XBt3hJoTsOeHKA/ls.jpg) no-repeat top right, url(http://s3-media1.fl.yelpcdn.com/bphoto/lcBBwRuHvzHIVI6tors32A/ls.jpg) no-repeat top left; }
<body></body>
解决方案7
0 2015-12-09 07:22:23
#sample1 {
background-image: url(image/sample1.gif), url(image/samplle2.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.