多个背景图像和背景颜色 [英] Multiple background-images and a background-color

问题描述

假设我想在CSS中渲染一个箭头，它应该有一个头部，尾部和灵活的宽度，所以它可以包含文本。

Suppose I want to render an arrow in CSS, which should have a head, a tail and flexible width so it can contain text. I can of course create multiple divs to get what I want, but how can this be done in CSS3?

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

I can use multiple background images:

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 头部和尾部，以及透明的中间部分。

This gives me an div with an arrow-head and tail, and a transparent middle-section. It does not seem possible specify the color to the middle section.

只有一个背景图片，您可以这样做：

With only one background-image, you could do this:

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

我知道这是可以在很多方面，但是background-速记定义？

I know this is doable in lots of ways, but is the background-color property really lost from the shorthand definition?

推荐答案

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

No, it's not exactly lost from the shorthand declaration. You can still specify the background color, but only for the last (middle) layer (regardless of whether you put an image there):

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

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

Note that for your scenario, your images may have to have completely opaque backgrounds. The background color will show under any transparent pixels of your images.

jsFiddle demo

声明 background-color 但是，对于您的场景，它可以是更好的，因为它允许您使用不同的颜色基于相同的背景图像（如果你有好的透明像素的图像的部分，用CSS背景颜色填充）：

Declaring background-color separately, however, may be much better for your scenario as it lets you use different colors based on the same background images (if you're good with transparent pixels on the parts of your images to be filled with the CSS background color):

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 demo

这篇关于多个背景图像和背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！