一个div中使用多张背景图片

Question

我在Photoshop中制作了一条带子。该带子由三部分组成。左右两侧固定为10像素。中间部分是可重复的图案。

是否可能将这些图像组合成我的 <tag> 的背景？

- holian

---

只有在CSS3中，您才能为一个元素设置多个背景，因此是的，但并非所有浏览器都支持它。 - j08691

这里有另一个可能的解决方案。如果您可以更改背景，使其由两个图像组成，则可以使用此处解释的技术：http://www.alistapart.com/articles/slidingdoors2/ - Alex Morales

Answer 1

@j08691指出，这只有在CSS3中才能实现。

#your-selector {
  background-image: url(one.png), url(two.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
  width: 300px;
  height: 350px;
}

请看教程

- MCSI

---

好的解决方案。但是，从我所读的内容来看，它并不在所有浏览器中都可以工作...在我看来，它已经足够普及以供使用，但这取决于你的目标受众。请谨慎使用。 - blo0p3r

Answer 2

只需给标签添加一个类，然后使用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;
}

代码来自于http://www.w3schools.com/cssref/css3_pr_background.asp 为了在其他IE版本中让它工作，你可以使用像CSS3Pie这样的东西，http://css3pie.com/documentation/supported-css3-features/#pie-background。但是在将代码实际应用之前，请进行充分测试。

- Oliver

Answer 3

只有现代浏览器才能使用CSS3实现。

.element{
    background-image: url(key.png), url(stone.png);
}

- laymanje

Answer 4

虽然不是所有浏览器都支持，但使用CSS3是可能的。 它应该看起来像这样：

#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

您可以在这里看到其他示例。

- zima

---

有必要回答一个六年前已经给出过几乎相同答案的问题吗？ - Nico Haase