創建一個帶背景和前景圖像的按鈕

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 */ 
} 

正如你可以看到我的形象是其中能裝進按鈕事實16×16。然而，原始背景圖像被完全剝離，使背景顏色透明。

我相信，如果可能的話，其基本的東西我可以忽略，並期待着解決這個問題。

最後按鈕的代碼：

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

感謝您的寶貴時間。

Answer 1

當您申請在CSS屬性，它完全覆蓋該元素的任何先前定義的屬性。你需要做的是告訴它2個背景應用到元素，它是這樣完成的：

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

Answer 2

只有在相同的CSS類/元素定義中支持多個背景。意思是，你必須在.button中設置兩個背景。

.print您的.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; 
}