CSS少与背景图像和渐变?

时间:2012-06-09 16:33:54

标签: css3 less

为此编写较少的内容的最有效方法是什么,以便它可以为所有浏览器创建规则?

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

1 个答案:

答案 0 :(得分:0)

使用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);