多个背景图像和背景颜色

Question

假设我要在CSS中渲染箭头，箭头应具有头部，尾部和灵活的宽度，以便可以包含文本。我当然可以创建多个div来获得所需的内容，但是如何在CSS3中完成呢？

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

div.arrow{
    background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
}

的HTML：

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

这给了我一个div带有箭头和尾巴的透明中间部分。似乎不可能在中间部分指定颜色。

仅使用一张背景图像，您可以执行以下操作：

div.arrow{ background: red url('some_image.png') no-repeat; }

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

Answer 1

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

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat, 
                red;
}

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

background- color但是，单独声明可能会更好，因为它可以让您基于相同的背景图像使用不同的颜色（如果可以用CSS背景颜色填充图像部分的透明像素，则可以这样做）：

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat;
}

/* Assuming your red arrow has this ID */
#red {
    background-color: red;
}