問題タブ [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 投票する
4 に答える
3025 参照

javascript - 背景の上のスクロールのグラデーション フェード テキスト

スクロールを上下にフェードする方法を探していました。上下に2つのpngを使用する方法を知っていますが、問題は、無地のページをスクロールするときにのみ役立つように見えることです。しかし、背景画像があるページで発生させたい..

何か案は?可能であれば?JS、HTML5、CSS?

効果を説明する図は次のとおりです。

グラデーション テキスト スクロール

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

android - テキストビューのテキストの色のグラデーションが機能しない

でグラデーションのテキストの色を設定したいTextView。このコードを使用しました

アクティビティが開始されると、テキストは表示されません。しかし、携帯電話の向きを変えると、テキストがTextViewグラデーション カラーで表示されます。HTC One V でテストしました。エミュレーターと Samsung デバイスで正常に動作しています。

次の例もテストしましたが、同じ問題が発生します。

https://github.com/koush/Widgets

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

javascript - -webkit-linear-gradientがJQuerySliderに追加されると、-moz-linear-gradientが壊れます

TL;DR-webkit-linear-gradientが壊れています-moz-linear-gradient

難問です。2つのハンドルが付いたJquerySliderプラグインを使用しており、背景色としてグラデーションを使用して、外側の範囲に色を付けています。私がやろうとしているのは、スライダーが動いたときにグラデーションのパーセンテージを更新することです。Chrome / Safariでは機能しますが、-mozタグと-webkitタグの両方が使用されているFirefoxでは機能しません。値は最初のスライダーの位置からプルされています。

-moz-linear-gradientタグしかない場合は機能しますが、-webkit-linear-gradientタグを追加すると、Firefoxでは機能しなくなります。

これがコードです

HTML:

JavaScript:

CSS:

これが何が起こっているのかを確認するためのリンクであり、cssが原因でそれがたくさんあります:)。(chrome / safariで開いて何をすべきかを確認し、Firefoxで壊れていることを確認します)

http://jsfiddle.net/DrewLandgrave/bep9A/

前もって感謝します :)

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

css - 三角形の矢印のCSSグラデーション

http://jsfiddle.net/ghAgQ/をご覧ください 。長方形と同様に、矢印にも同じグラデーションが必要です。それがどのように行われたかについてのアイデアはありますか?ありがとう

</p>

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

php - PHP GD 2 色 3 ステップ グラデーション?

私はpng画像(背景が透明で、黒が唯一の前景色)を取り、黒の前景にのみ2色の3段階の線形グラデーションを重ねようとしています。

例; 下から上へ: 0% - カラー 1、50% カラー 2、100% カラー 1。

グラデーションがphp-gdの黒の前景にのみ影響するようにすることは可能ですか? もしそうなら、どうすればこれを行うことができますか?

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

css - CSS線形グラデーションがライブサーバーで機能しない(IEのみ)、ローカルホストで正常

しばらくの間取り組んできた新しいイントラネットを公開しました。すべてが良いです(避けられないユーザー中心の問題といくつかのバグを除いて)

しかし、何らかの理由で私のcss線形グラデーションが機能していないことが明らかになりました(問題を修正するためにコードをハッキングするのではなく、実際にフロントエンドを見る機会があります)。

テスト環境(localhost)で同じサイトを表示すると、グラデーションがすべての栄光で機能するため、これは私には非常に奇妙です。同じPC、同じブラウザ(2つのタブが開いている、1つはローカル、もう1つは外部)

他のすべてのcss(同じスタイルファイル内)は正常に機能します。

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

css - グラデーションの IE9 背景サイズ

background-sizeforIE9を使用する方法はありgradientsますか? 私の場合、追加background-sizeCSSても効果がないからです。

[更新しました]

サンプルコード:

その場合、background-size は機能しません。

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

svg - SVGグラデーションを使用して、色付きの領域のサイズに応じてさまざまな色を表示する方法

SVGとD3を使用して棒グラフを作成していますが、それらに色を付ける方法について質問があります。このサイトや他のサイトで多くの質問を検索しましたが、同じ問題を抱えている人はまだ見つかりませんでした。

各バーの下部から1つの色(黄色など)で開始し、バーの高さが高くなるにつれて、2番目の色(赤など)を徐々に混ぜて、バーのポテンシャルが最大になるようにします。高さは2番目の色のみになります。この例では、潜在的な高さの半分であるバーの上部はオレンジ色になります。

任意の高さのバーに対して、必要に応じてバーに色を付ける独自の線形グラデーションを生成する関数を作成することができました。

ただし、このグラフは動的であり、データが更新されるとバーの高さが1秒間に何度も変化する可能性があるため、バーごとに新しいグラデーションを作成して適用することは明らかに効率的ではなく、更新に深刻な遅れが生じる可能性があります。バー。(静的テストケース以外で実際にこれを試したことがないことを認めます。そのため、最後の仮定について間違っている可能性があります。)

もちろん、静的グラデーションを使用すると、次のような結果が得られます。この場合、領域の高さではなく、バーの高さに応じて色が混合されます。

静的グラデーションを使用する

ただし、私の希望するシナリオでは、小さいバーの赤または紺はほとんどありません。

最後に、私の質問はこれです:する方法はありますか

  1. SVG領域自体に適用される単一のグラデーションを作成します(簡単
  2. グラデーションがどういうわけかマスクされていると言っています(簡単
  3. 次に、グラフのバーを表す長方形の下で選択的にマスクを解除しますか?(???

または、私が見落としている他のテクニックはありますか?

ありがとう

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

jquery - IE 8 で白から黒にのみグラデーションが表示される

私はdivに適用したグラデーションを持っています。それは非常に明るい灰色から少し暗い灰色で、IE8を除くすべてのブラウザで機能します。css にアクセスできないので、これらのスタイルを jquery で適用する必要がありましたが、他のすべてのブラウザーで機能するように見えるので、なぜ IE で機能しないのかわかりません。コードは次のとおりです。

そして、すべてのクラスを div のグラデーション 1 ~ 6 に適用しました。div の html は次のとおりです。

このページはhttp://www.brighamandwomens.org/Patients_Visitors/pcs/rehabilitationservices/mock/about.aspx です。

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

firefox - SVG 線形グラデーションのサイズが Firefox で変更されない

SVG で作成した線形グラデーションに問題があります。Firefox では、250 ピクセル程度を超えて拡張することはできません。これが私がこれまでに得たものです。