多个背景图像和背景颜色

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

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

原文由 Frederik Wordenskjold 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 演示

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议