Question

我需要一些设置css按钮的帮助。我的意图是在一个按钮内有3个图像，形成一个背景图像，让我们调用pic1，pic2和pic3。我将pic1设置为left，pic3设置为右边的边框，我想要pic2重复x填充其间的所有剩余空间，问题是pic2很乐意覆盖pic3。

到目前为止：

button {
    background: url("images/btn_00.jpg") no-repeat scroll 0 0%, 
                url("images/btn_01.jpg") repeat-x scroll center center, 
                url("images/btn_02.jpg") no-repeat scroll right center transparent; 
}

做我想要的可能吗？怎么样，拜托？

Answer 1

您的样式使用的是CSS3 - 因此请注意（如果您还不知道）这在IE8或更低版本中不起作用。

您的问题的答案在于理解Stacking Order of Multiple Backgrounds - 您需要将图片3堆叠在图片2的顶部，这意味着它应该在图片2之前列出。（这与z-index如何确定哪些元素绘制其他元素

相反，这是违反直觉的。）

Answer 2

简答：不。一个元素只能有一个背景。

也许你可以用以下元素中的三个元素来完成它：

<div id="mybutton">
  <img src="leftimage.png" />
  <span class="mymiddleElement">MyText in the Button</span>
  <img src="rightimage.png" />
</div>

并使用css

设置.mymiddleElement的背景

如何以特定方式平铺背景图像？

2 个答案: