0

我有一个小问题试图让以下工作，并且不确定这是否是 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" ... >

感谢您的宝贵时间。

4

2 回答 2

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;
}
于 2013-01-21T13:01:46.247 回答
1

当您在 CSS 中应用属性时，它会完全覆盖之前为该元素定义的任何属性。您需要做的是告诉它为元素应用 2 个背景，如下所示：

.button.Print {
    background-image: url(images/button.gif), url(../img/buttons/print.png);
}
于 2013-01-21T13:01:55.727 回答