css背景渐变与背景图像在css3上两个不同的类

Question

是否可以在同一元素的两个不同类上定义背景图像和背景渐变？

input[type=password] {
    background-image: url(/images/icons/glyphicons_203_lock.png);
    background-size: 17px auto;
    background-position: 9px 5px;
}


.err input[name] {
    background: -moz-linear-gradient(top,  #ffdddd 0%, #ffeeee 100%);
}

当出现错误时，图标会丢失。

我正在使用“less”，如果这有帮助的话，我想要避免的是必须单独定义每个.err元素上的每个图标，这将是很多重复代码。

Answer 1

你使用的方式，渐变会覆盖图像，因为渐变也是一个图像，所以你可以通过分离图像和像这样的渐变来使用CSS3多个背景，它会给你图像和渐变

background-image: url('url'), -moz-linear-gradient(top, #ffdddd, #ffeeee);