css - 如何以这种特定方式平铺背景图像？

Question

我需要一些帮助来设置一个 CSS 按钮。我的意图是在一个按钮内放置 3 个图像形成背景图像，让我们调用 pic1、pic2 和 pic3。我将 pic1 设置为左​​侧，将 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 如何确定哪个 的工作方式有悖常理em>元素在其他元素上绘画。)