假设我想在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; }
解决方法
不,速记声明并不完全失去.您仍然可以指定背景颜色,但仅适用于最后(中间)图层(无论是否在其中放置图像)：
div.arrow {
background: url('arrowtail.png') left no-repeat,url('arrowhead.png') right no-repeat,red;
}
请注意,对于您的场景,您的图像可能必须具有完全不透明的背景.背景颜色将显示在图像的任何透明像素下.
然而,单独声明背景颜色可能会比您的场景好多了,因为它可以让您根据相同的背景图像使用不同的颜色(如果您的图像部分上的透明像素可以填充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;
}
