【发布时间】：2013-02-14 13:41:16
【问题描述】：
我需要动态生成 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：
我还注意到，当我在一个声明中声明多个属性时（即 background 属性中的 linear-gradient 旁边的 width 和 height 或者甚至只是 width 和 height 使用background-size 属性）只有第一个被应用。如何解决这个问题？
【问题讨论】：
-
我不认为你会得到结果，用你尝试的方式，你可以尝试的另一种方法是每个方向有 4 个
<div/>标签，大小与@987654335 相同@ 的 html 页面，想像layers之类的东西，或者也许你可以用图像做一些事情 -
感谢您的回复，问题 1 可能有效（我会尝试），但问题 2 仍然失败，有什么想法吗？
-
所以我尝试了分层 div 并且效果很好，它们只需要以相反的顺序堆叠以获得相同的效果。谢谢！
-
同样对于 Qustion 2，它现在似乎工作正常，我不确定我做了什么不同。
标签： jquery css background gradient