在多個選擇器中的多個背景

我想創建一個包含使用多個背景的圖像的CSS3按鈕。我想使用相同的基本樣式（基於Twitter的BootStrap CSS框架），但通過添加一個類來應用不同的圖像。在多個選擇器中的多個背景

我想要一個漸變作爲基礎，然後添加一個圖像標記在一個額外的類。我可以通過這樣的引導擴展btn CSS類一個鍵做到這一點：

.btn.btnEdit 
{ 
    padding-left: 25px; 
    background-color: #e6e6e6; 
    background-repeat: no-repeat, no-repeat; 
    background-position: 5px center, center center; 
    background-image: url(/images/edit_16.png), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); 
    background-image: url(/images/edit_16.png), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); 
    background-image: url(/images/edit_16.png), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); 
    background-image: url(/images/edit_16.png), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); 
    background-image: url(/images/edit_16.png), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); 
    background-image: url(/images/edit_16.png), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); 
} 
.btn.btnEdit:hover { 
    background-position: 5px center, 0 -15px; 
}

但最好我想刪除樣板CSS，只是再次指定額外的背景（類似於只是background-image: url(/images/edit_16.png), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);或東西）。有沒有辦法通過級聯來指定額外的背景？

這是ASP.NET，所以我不能使用沒有控制適配器的滑動門，這是我不想要的。

來源

2011-10-14 Echilon

你的意思是沒有供應商的前綴，或沒有'url（/images/edit_16.png）'？ – BoltClock

分隔背景圖像和背景顏色。如下所示：

background-image: url(/images/edit_16.png); 
background-color:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);

對每個css3漸變語法都這樣做。

來源

2011-10-15 03:00:34 rizqyhi

非常好，謝謝。如果你在Bootstrap中使用這個，你需要在你的聲明中加入'filter：none'來使圖像在IE中工作。 – Echilon

在多個選擇器中的多個背景

回答

相關問題