多重背景CSS3按钮（+透明度）

Question

这是我目前的代码：

background: none;
background-image: url(../images/red-button-bg-left.png), url(../images/red-button-bg-tile.png), url(../images/red-button-bg-right.png);
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: 0 0, 19px 0, 100% 0;

按钮长这样：

[left corners image][body image][right corners image]

通常我的代码可以正常工作，但在这种情况下，url(../images/red-button-bg-tile.png) 会在左右图像之下，并且由于它是透明的，会破坏按钮样式。

有什么技巧吗？

- Gajus

---

这个问题如果有你的按钮的jsFiddle演示会更容易回答。你可以将图片托管在http://imgur.com/上。 - thirtydot

CSS 3文档中提到：“列表中的第一张图片是最靠近用户的图层，接下来的图层会被绘制在第一张图片的后面，以此类推。”。如果这种情况没有发生，那很可能是浏览器的bug。你用来测试的是哪个浏览器？ - RoToRa

问题在于图像是透明的，@RoToRa。 - Gajus

Answer 1

将左右两侧的边框设置为透明，并使用 background-clip:padding-box; 仅针对平铺背景。同时，边框宽度应与左右角图片的宽度相同。

- Lea Verou

Answer 2

诀窍在于不要在端点上使用透明度。最简单的做法是将透明部分与主背景颜色相同。中间背景穿过整个图像，位于端点图像下方，因此透明区域可穿透。

由于您已经使用了CSS3（多重背景），取决于您的图片外观，您还可以切换到border-radius（或将其用于轮廓，并使您的背景变成方形，假设透明度是为了圆角）和渐变背景。

- Shauna

Answer 3

你尝试过重新排列CSS中的背景值吗？例如，将url（../images/red-button-bg-tile.png）放在最后或最前，并相应地更改位置和重复次数。

- Ruslan