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跨选择器的多个背景

回答

相关问题