1

我需要动态生成 CSS 模式，为此我需要将几个linear-gradient或radial-gradient应用于客户端的 CSSbackground属性。而且我需要同时动态改变这些渐变的参数。

如果我使用它，则只有一个渐变应用于背景：

var color1;
var color2;
var color3;
var color4;
var direction1;
var direction2;
var direction3;
var direction4;
var size;

$("body").css({
    background: 'linear-gradient('+direction1+', '+color1+' 25%, transparent 25%) '+size+'/2 0,
                 linear-gradient('+direction2+', '+color2+' 25%, transparent 25%) '+size+'/2 0,
                 linear-gradient('+direction3+', '+color3+' 25%, transparent 25%),
                 linear-gradient('+direction4+', '+color4+' 25%, transparent 25%)'
});

同样的事情也发生在这里，因为每个属性都会覆盖另一个：

$("body").css('background','linear-gradient('+direction1+', '+color1+' 25%, transparent 25%) '+size+'/2 0)');
$("body").css('background','linear-gradient('+direction2+', '+color2+' 25%, transparent 25%) '+size+'/2 0)');
$("body").css('background','linear-gradient('+direction3+', '+color3+' 25%, transparent 25%)');
$("body").css('background','linear-gradient('+direction4+', '+color4+' 25%, transparent 25%)');

我试过使用LessCSS，但它的 CPU 太密集了，因为每次 css 属性更改时，即每次鼠标移动时，它都需要渲染一个新的样式表（这是一个要求）。

请注意，我需要一次应用所有渐变，而不是让浏览器决定使用哪一个。

问题 1： 知道如何更有效地做到这一点吗？

问题 2： 我还注意到，当我在一个声明中声明多个属性时（即在一个属性中也width和height旁边，或者甚至只是和使用该属性）只有第一个被应用。如何解决这个问题？linear-gradientbackgroundwidthheightbackground-size

4

1 回答 1

1

尝试这样的事情：

$("body").css({
    'backgroundImage': 'linear-gradient('+direction1+', '+color1+', transparent), 
        linear-gradient('+direction2+', '+color2+', transparent), 
        linear-gradient('+direction3+', '+color3+', transparent),  
        linear-gradient('+direction4+', '+color4+', transparent)'
    })
于 2013-02-14T14:28:21.277 回答