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]

Normaly我的代码可以工作，但是，在这种情况下，url(../images/red-button-bg-tile.png)位于左右图像下方，因为它是透明的，会弄乱按钮样式。

诀窍是什么？

Answer 1

设置透明的左右边框，左边和右边的宽度。右角图像，仅使用background-clip:padding-box;作为平铺背景。如果这听起来不清楚，我很乐意编辑你提供的小提琴。

Answer 2

诀窍是不要在你的最终作品上使用透明度。最简单的方法是使透明部分与主背景颜色相同。你的中间背景在整个事物中，在最终图像下面，通过透明区域显示出来。

由于你已经使用CSS3（多个背景），根据你的图像是什么样的，你也可以切换到border-radius（或者用它来进行舍入，只是让你的背景平方，假设透明度用于圆角）和渐变背景。

Answer 3

您是否尝试过在css中重新排序背景值？例如将url（../ images / red-button-bg-tile.png）放在最后或第一位，然后改变位置并相应重复。

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

3 个答案: