缩短此CSS代码

-1

我有这个CSS代码，我想缩短它。缩短此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) 
}

来源

2012-06-14 Alaa Gamal

不幸的是，CSS目前并而不是提供了一种在使用多个背景图层时覆盖单独的背景图层的方法。

您可以利用CSS预处理器，如LESS或SASS，然后您可以将您的渐变保存在变量中以防止其重复。例如，在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; 
}

来源

2012-06-14 21:49:08

我是css编码器，因为3年..但这是第一次我知道我可以在css中设置varibales！这是好soultion非常感谢（f） –

我想缩短此代码，因为我将使用此（futare /服务）与所有其他浏览器像（-webkit，-o，过滤器等），我认为这个代码将是一个有史以来最大的代码...所以你的想法是什么 –

请注意，这些不是变量在CSS（即将推出），但变量在一个CSS预处理器 – Luca

编辑

你的代码是尽可能短而无需使用预处理器为萨芬建议（信贷给他！）

来源

2012-06-14 21:42:38 Luca

这是行不通的。 http://jsfiddle.net/xGdv5/1/ – barro32

@luca我会尝试此代码现在，但我认为我已经测试它，并没有工作..！ –

对不起，我编辑了我的答案，以修正错误 – Luca

缩短此CSS代码

回答

相关问题