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