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 demo

然而，单独声明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 demo

Answer 2

我发现使用多个背景图像对于这样的事情是有问题的。您是否考虑过使用：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>

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

多个背景图像和背景颜色

2 个答案: