縮短此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代碼

回答

相關問題