多个背景图像和背景颜色

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

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

jsFiddle演示

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

jsFiddle演示