CSS與背景圖像和漸變？

Question

什麼是最有效的方法來減少這個，以便它可以爲所有瀏覽器創建規則？

CSS output: 

background: url(../i/bg_lines7.png), -webkit-linear-gradient(left, #555, #333) #333; 
background: url(../i/bg_lines7.png), -moz-linear-gradient(left, #555, #333) #333; 
.. 


CSS output: 
background: #000, url(../i/bg_lines7.png), -webkit-linear-gradient(left, #555, #333); 
background: #000, url(../i/bg_lines7.png), -moz-linear-gradient(left, #555, #333); 

Answer 1

使用mixins。

.my-multi-browser-thing (@image,@gsc,@gec,@bfb) { 
    background: url(../i/@image), -webkit-linear-gradient(left, @gsc, @gec) @bfb; 
    background: url(../i/@image), -moz-linear-gradient(left, @gsc, @gec) @bfb; 
    ... add more syntax variations ... 
} 

.my-multi-browser-thing ("bg_lines7.png",#555,#333);