Css 多个背景图像和一个背景色

假设我想在CSS中呈现一个箭头，它应该有一个头部、一个尾部和灵活的宽度，这样它就可以包含文本。当然，我可以创建多个div来获得我想要的，但是如何在CSS3中实现这一点呢

我可以使用多个背景图像：

div.arrow{
背景：url（'arrowtail.png'）左侧不重复，url（'arrowhead.png'）右侧不重复；
}

html：

<div class="arrow">This text is on a transparent background</div>

---

我知道这在很多方面都是可行的，但是背景颜色属性真的从速记定义中丢失了吗？

不，它并没有从速记声明中丢失。您仍然可以指定背景色，但只能指定最后（中间）层的背景色（无论是否在其中放置图像）：

div.arrow{
背景：url（'arrowtail.png'）没有重复，
url（'arrowhead.png'）右侧无重复，
红色
}

请注意，对于您的场景，您的图像可能必须具有完全不透明的背景。背景色将显示在图像的任何透明像素下

---

但是，单独声明

background color

可能更适合您的场景，因为它允许您基于相同的背景图像使用不同的颜色（如果您擅长使用CSS背景色填充图像部分的透明像素）：

div.arrow{
背景：url（'arrowtail.png'）没有重复，
url（'arrowhead.png'）右侧无重复；
}
/*假设你的红色箭头有这个ID*/
#红色的{
背景色：红色；
}

---

我发现使用多个背景图像对于这样的事情是有问题的。您是否考虑过使用：before和：after伪元素？我写了一个简单的例子：

<style>
    .arrow { display:block; margin:0; padding:0; width:200px; height:45px; line-height:45px; text-align:center; background:#ddd; }
    .arrow:before { float:left; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
    .arrow:after { float:right; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
</style>

<div class="arrow">This text is on a transparent background</div>

.arrow{显示：块；边距：0；填充：0；宽度：200px；高度：45px；线条高度：45px；文本对齐：中心；背景：#ddd；}
.arrow:在{float:left；display:block；margin:0；padding:0；宽度：25px；高度：45px；背景：#ccc；内容：''；}
.arrow:在{float:right；display:block；margin:0；padding:0；宽度：25px；高度：45px；背景：#ccc；内容：“”；}
此文本位于透明背景上

---

只需将：before和：after声明中的背景色替换为所需的箭头图像。

这很酷。它在IE9中工作，但在“兼容”模式下不能工作。@Steve Wellens:因为IE9兼容模式不使用IE9渲染引擎。我不记得是7点还是8点了。啊，谢谢。问题在于非不透明的背景图像。当然，背景色将填充透明区域，使其看起来像是覆盖了背景！事实上，我没有想到这一点。很好的解决方案@Frederik：而且在兼容性方面要好一点：）是的，我知道：）我只是在玩css3，测试一些东西。但是，是的，在一个真实的项目中，仍然需要依靠它。