問題タブ [linear-gradients]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
3 に答える
2770 参照

svg - 角度がわかっている場合、SVG 線形グラデーション属性 x1 y1 x2 y2 を計算しますか?

SVG でわかっているように、角度のある線形グラデーションは、属性 x1、x2、y1、y2 を設定することによって行われます。ただし、角度だけを取得すると、

1.x1、y1、x2、y2の結果を計算する方法は?

2.この数式 tan (角度) = (y2-y1)/(x2-x1) は正しいですか? すべてのパラメータを計算するにはどうすればよいですか。

0 投票する
4 に答える
10818 参照

javascript - SVGでグループ化されたパスを線形グラデーションで埋めることは可能ですか(jQueryイベントのcssまたはattrによって)

選択したすべてのs<g>を塗りつぶす代わりに、SVG画像のaの1つのグラデーションを塗りつぶすにはどうすればよいですか?<g><g>

この場合、黄色から赤への1つのグラデーションだけで塗りつぶされたアフリカを表示したいと思いますが、サブグループのために、塗りつぶしは多くのグラデーションになります。

javascript:

SVG:

これはアフリカです

この問題を解決するにはどうすればよいですか?元の画像に別のタグを
追加せずにこの問題を解決するにはどうすればよいですか?<g>

0 投票する
2 に答える
1234 参照

css - IEは、cssグラデーションが使用されるdivに青い境界線を追加します

私は灰色の線を作ろうとしています。それは透明にフェードアウトしています。1x100pxのdivを作成し、フェード効果を作成するためにcssグラデーションを追加しました。

divが青い境界線を取得するIEを除いて、これは正常に機能します。

これはdivの私のcssです

divを調べて高くしようとすると、グラデーションは機能しているように見えますが、色が青で、境界線が追加されています。なんで?

0 投票する
2 に答える
1345 参照

firefox - Firefox 4 で線形グラデーションが機能しない

最近、CSS3 のみを使用して Web ページにグラデーションの背景を適用しようとしました。次のコードをテストしている間:

結果は次のとおりです。 Firefoxの卒業生は間違っていました

まさに私が探していたものではありません...何が起こっているのか分かりますか? OSはWin7 64bit、Firefox 4です。よろしくお願いします!

0 投票する
2 に答える
911 参照

webkit - -moz-repeating-linear-gradientを使用して背景を-webkitに変換する方法(特定の例)

私はFirefoxでこのバックグラウンドを実行しましたが、webkit / chromeで複製することはできません(いくつかの代替案を試しましたが、何もしませんでした):

正しい翻訳は何でしょうか?同じパターンを達成することは可能ですか?(または少なくとも非常に近いもの)。

ありがとう!

0 投票する
2 に答える
463 参照

design-patterns - 画像ストリップの高さの問題を伴うCSSグラデーション

線形グラデーション パターン ストリップ、mystrip.jpg (1x1024 ピクセル) を Web ページのボディ背景として使用するにはどうすればよいですか? 水平方向に繰り返す必要があり、その高さは体の高さの 100% です。

で試しました

しかし、本文のコンテンツが 1024 ピクセルの高さを超えると、ストリップ パターンの下の境界線がはっきりと見えます。

ありがとう

ルカ

0 投票する
1 に答える
934 参照

css - css3線形グラデーションの背景画像がOpera11.11で機能しない

Opera 11.10 Ubuntu 10.04 64ビット:動作中

Opera 11.11 Windows 7 64ビット:動作していません

何か案は?

0 投票する
2 に答える
852 参照

firefox - ff5 で極端なパフォーマンスの問題を引き起こす CSS3 background-size プロパティ

今日、ページをまとめていて、CSS3 を使用して縞模様の背景を実装しようと考えました。Firefox を除くすべてのブラウザですべて問題ないように見えました。(私は5.01を使用していますが、5.0もチェックインしています)

コードは非常に単純です。

Chrome と Opera では問題なく動作しますが、実際には FF がクラッシュします。

明らかに、背景画像を繰り返すことでこの効果を達成できることはわかっていますが、他の誰かが同様の問題を抱えているのか、それとも CSS3 に問題があるのか​​ 疑問に思っていました ;)

jsfiddle でテストしても同じ問題が発生します。クラッシュの責任を負いたくないので、フィドルは作成しませんでした。

ああ、それは遅いPCの問題ではありません。私はi7、8GBのRAMを使用しています。

これを増やすか完全に削除すると問題は解決するので、background-size プロパティに問題があると思いますが、background-size を使用できない限り、私には適していません。

0 投票する
4 に答える
44127 参照

css - Google Chrome の背景グラデーション

ここで本当にアマチュアの質問です-ボディの背景グラデーションがクロムで機能していません。非常に奇妙です。私は試しました:

まったく役に立たない!他のすべてのブラウザで動作します...

0 投票する
0 に答える
7069 参照

css - 色をブレンドせずに斜めの CSS グラデーションを作成する方法 (急激な色の変化) は、右に 70% 移動しますか?

私がやろうとしていることを行うCSSグラデーションカラージェネレーターが見つかりません。ブレンドのない斜めのグラデーションで、(たとえば) から#252525への急激な色の変化のみ#0099ffで、2 つの色が交わる線はコンテナーの左から約 70% の位置にあるため、線はコンテナーの半分より少し上から始まります。コンテナの x 軸、および線は、コンテナの右側の y 軸の途中で終了する可能性があります。

傾斜度を計算するための具体的な数値と、グラデーションの開始点の xy 座標を強調できれば、非常に役立ちます。この時点で私はただ混乱しています。