1

CSS パターンを動的に生成する必要があるため、クライアント側で複数linear-gradientまたはradial-gradientCSSプロパティに適用する必要があります。backgroundそして、これらのグラデーションのパラメーターを同時に動的に変更する必要があります。

これを使用すると、背景にグラデーションが 1 つだけ適用されます。

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たが、マウスが動くたびに css プロパティが変更されるたびに新しいスタイルシートをレンダリングする必要があるため (これは要件です)、CPU 負荷が高すぎます。

すべてのグラデーションを一度に適用する必要があることに注意してください。使用するグラデーションをブラウザーに決定させるのではありません。

質問 1: これをより効率的に行う方法を教えてください。

質問 2:width 1 つの宣言で複数のプロパティを宣言すると(つまり、プロパティ内の の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 に答える