css - 缩短此 CSS 代码

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