Question

我在Photoshop中制作了一个功能区。功能区有三个部分。左右部分是固定的10px。中间部分是一种可重复的模式。

是否可以将这些图像组合为我的标签背景？

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;
}

请参阅tutorial

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之类的东西但是，在将代码置于实时之前，我会进行彻底的测试

Answer 3

现代浏览器只能使用css3。

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

Answer 4

虽然并非所有浏览器都支持它，但CSS3可以实现。它应该是这样的：

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

您可以看到其他示例here。

一个div中的多个背景图像

4 个答案: