Question

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

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

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-gradient或background属性，或者只是{ {1}}和width使用height属性）仅应用第一个属性。如何解决这个问题？

Answer 1

尝试这样的事情：

$("body").css({
    'backgroundImage': 'linear-gradient('+direction1+', '+color1+', transparent), 
        linear-gradient('+direction2+', '+color2+', transparent), 
        linear-gradient('+direction3+', '+color3+', transparent),  
        linear-gradient('+direction4+', '+color4+', transparent)'
    })

如何使用jQuery / javascript应用多个CSS背景属性？

1 个答案: