Html 一个 div 中的多个背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9070362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple background images in one div
提问by holian
I made a ribbon in Photoshop. The ribbon has three part. The left and right parts are a fixed 10px. The middle sectoin is a repeatable pattern.
我在 Photoshop 中制作了一条丝带。丝带分为三部分。左右部分是固定的10px。中间部分是一个可重复的模式。
Is it possible to combine these images as the background of my tag?
是否可以将这些图像组合为标签的背景？
回答by MCSI
回答by Oliver
Just add a class to the tag, then using CSS add the background to that class. This will not work on IE8 or earlier
只需向标签添加一个类，然后使用 CSS 将背景添加到该类。这不适用于 IE8 或更早版本
div
{
background:url(smiley.gif) top left no-repeat,
url(sqorange.gif) bottom left no-repeat,
url(sqgreen.gif) bottom right no-repeat;
}
Code is from http://www.w3schools.com/cssref/css3_pr_background.asp
代码来自http://www.w3schools.com/cssref/css3_pr_background.asp
To get it to work in other versions of IE you can use something like CSS3Pie http://css3pie.com/documentation/supported-css3-features/#pie-backgroundHowever I would test thoroughly before putting the code live
为了让它在其他版本的 IE 中工作，你可以使用类似 CSS3Pie http://css3pie.com/documentation/supported-css3-features/#pie-background 的东西 但是我会在将代码上线之前进行彻底的测试
回答by zima
Although not all browsers support it, but it is possible with CSS3. It should look like this:
虽然并非所有浏览器都支持它，但 CSS3 是可能的。它应该是这样的：
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
You can see other examples here.
您可以在此处查看其他示例。
回答by laymanje
It is only possible with css3 for modern browsers.
只有现代浏览器的 css3 才有可能。
.element{
background-image: url(key.png), url(stone.png);
}
