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);