CSS3跨選擇器的多個背景

我想要實現的是在兩個單獨的CSS類中設置背景（使用CSS3的多背景會很棒）。我希望儘可能少的標記和普遍性。CSS3跨選擇器的多個背景

例子：

CSS

.button { 
    display: block; 
} 

.green { 
    background-color: #87b400; 
    background: -moz-linear-gradient(top, #a4d400, #739e00); 
} 

.icon { 
    background-repeat: no-repeat; 
} 

.icon.add { 
    background-image: url('../img/icons/add.png'); 
}

HTML

<a href="#" class="button green icon add">add item</a> 
<input type="submit" name="example" value="add item" class="button green icon add" /> 
<button type="submit" class="button green icon add">add item</button>

我知道我可以做這樣的事情

<a href="#" class="button green"><span class="icon add">add item</span></a>

但我認爲有更好的方法，我不能在input元素內使用它。

我也不想這樣做

.button.green.icon.add { 
    background: -moz-linear-gradient(top, #a4d400, #739e00), 
       url('../img/icons/add.png'); 
}

因爲有，比方說，5種顏色和11個圖標也將是一個恐怖的。

來源

2010-11-15 wojtiku

您正在使用哪種瀏覽器？可以有所作爲，因爲我認爲多個背景支持仍然很不完善。 – 2010-11-15 21:31:23

問題不是關於瀏覽器支持，沒有問題:) – wojtiku 2010-11-15 22:03:29

這是我的理解，CSS3多圖像背景只能在相同的聲明。

http://www.w3.org/TR/css3-background/#layering

來源

2010-11-15 21:23:52 DaiYoukai

嗯......我想你是對的。但你認爲最好的解決方案是什麼？這是我在P.S.中提出的嗎？ – wojtiku 2010-11-15 22:09:19

@wojtiku就我個人而言，我只想使用額外的跨度圖標CSS。您必須完全爲輸入元素創建一個單獨的類，儘管'background：url（'../ img/icons/add.png'），-moz-linear-gradient（top，＃a4d400，＃739e00）;' – DaiYoukai 2010-11-15 23:14:44

嗯......當我想到這是唯一有意義的解決方案。但爲了使它更通用，也許最好用'div'包裝'a' /'input' /'button'，這樣我們可以得到像這樣的'

add item

' - 這樣我們就可以正確設置所有3個版本。 – wojtiku 2010-11-16 01:56:19

DaiYoukai是正確的，CSS3多圖像背景 - 不能在多個選擇器使用。

解決方法：您可以使用CSS3內容功能 - 它幾乎可以創建額外的元素。

CSS

.icon{ 
    background-image: url('../img/icons/icon.png'); 
    width:16px; 
    height:16px; 
} 
.icon.add:after {/* new virtual layer */  
    background-image: url('../img/icons/icon_add.png'); 
    content: ""; 
    display: block; 
    position: absolute; 
    width:16px; 
    height:16px; 
}

注：現代瀏覽器正確支持CSS3特性，除了IE：

CSS3多背景 - 從IE9。
CSS3內容 - 來自IE8。

來源

2012-11-24 23:52:50 vitrilo

IE可以燒到地面.......然後我們將汽油倒在它上面...... – 2016-08-19 17:13:22

CSS3跨選擇器的多個背景

回答

相關問題