Question

我有一个小问题试图让以下工作，并且不确定它是否是CSS3旨在处理的东西。我环顾四周，发现支持多个背景图像，但尝试了很多例子都导致了nada。

这是用于呈现我的按钮的主要CSS代码：

.button {
    background:#eee url(images/button.gif) repeat-x 0 0;
    border:solid 1px #b1a874;
    color:#7f7f7f;
    font-size:11px;
    padding:2px 6px 2px 6px;
    cursor:pointer;
    line-height:14px !important;
}

上面的代码生成了很好的标准按钮。但现在我想在某些按钮上添加图标，例如打印按钮。我使用了2套额外的CSS类：

input.addImage {
    background-repeat: no-repeat;  /* once */
    background-position: 5px 2px;  
    padding-left: 16px;     
    vertical-align: middle;
}

和

input.Print {
    background-image: url(../img/buttons/print.png); /* 16px x 16px */
}

正如您所看到的，我的图像实际上是16x16，非常适合按钮。然而，原始背景图像完全被剥离，使背景颜色保持透明。

我确信，如果它可能，它是我忽略的基本东西，并期待着解决这个问题。

最后是按钮的代码：

<input type="button" class="button addImage Print" ... >

感谢您宝贵的时间。

Answer 1

仅在同一CSS类/元素定义中支持多个背景。意思是，您必须在.button中设置两个背景。

您的.print必须包含以逗号分隔的默认背景，并跟随您的print.png图标。

修改

我的回答并不是很清楚。你必须先指定背景，它应该在另一个背景之上。这是一些带有随机图片的示例代码。

演示：http://jsfiddle.net/RzWfp/

.button { background-image: url(http://www.myinkblog.com/wp-content/uploads/2009/02/background2.jpg); border:solid 1px #b1a874; color:#7f7f7f; font-size:11px; padding:2px 6px 2px 6px; cursor:pointer; line-height:14px !important; } .button-test { background-image: url(http://www.famfamfam.com/lab/icons/silk/icons/feed.png), url(http://www.tutorial9.net/wp-content/uploads/2008/07/air-balloon-gradient.jpg); background-position: left center, center center; background-repeat: no-repeat; padding-left: 20px; }

Answer 2

在CSS中应用属性时，它会完全覆盖该元素以前定义的任何属性。你需要做的是告诉它对元素应用2个背景，这样做：

.button.Print {
    background-image: url(images/button.gif), url(../img/buttons/print.png);
}

创建具有背景和前景图像的按钮

2 个答案: