Question

我有这个css代码，我想缩短它。

#one{
background: #6cab26;
background-image: url(#1_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
}

#two{
background: #6cab26;
background-image: url(#2_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */

}

#three{
background: #6cab26;
background-image: url(#3_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
}

这个css代码是使用带背景的渐变！

它工作得很好，但如何缩短呢？

我想要这样的东西

#one,#two,#three{
background: #6cab26;
background:-moz-linear-gradient(top, #444444, #999999);
}

#one{
background-image: url(#1_img_url)
}
#two{
background-image: url(#2_img_url)
}
#three{
background-image: url(#3_img_url)
}

Answer 1

修改

您的代码尽可能短，而不使用Marat建议的预处理器（归功于他！）

Answer 2

不幸的是，当使用多个背景图层时，CSS当前不提供了覆盖单独背景图层的方法。

您可以利用LESS或SASS之类的CSS预处理器，然后可以将渐变保存在变量中以防止其重复。例如，在LESS：

@grad: -moz-linear-gradient(top, #444444, #999999);

#one {
    background-image: url(#1_img_url), @grad;
}

#two {
    background-image: url(#2_img_url), @grad;
}

#three{
    background-image: url(#3_img_url), @grad;
}

缩短此CSS代码

2 个答案: