問題タブ [css-gradients]

背景としての画像と、CSS 線形グラデーションを使用したいと思います。

デスクトップ ブラウザ (Firefox 44.x; IE 10; Chrome; Safari) では問題はありませんが、モバイル ブラウザでは動作しません (iPhone 5、(9.x) で safari、app firefox、app でテストしました)。クロム）。

私はこれを使用します：

どうしたの？

どうもありがとう、そして私の英語でごめんなさい:)

次のような CSS があります。

Chrome は HTTP 400 を報告しますが、Firefox はすべてが適切であると報告します。

Evil-whales.png,%20linear-gradient(rgb(78,%2078,%2078)%2081%,%20rg…%20rgba(76,%20201,%2061,%200)%2083%,%20rgba(78) ,%2078,%2078,%200)%20100%):1 GET ...

コンソール ビューから非表示にせずにこれを解決するにはどうすればよいですか?

スクロール div の下部に小さなグラデーションを配置しようとしています。この SO スレッドに対する受け入れられた回答に基づいてソリューションを作成しました。グラデーションは問題なく表示されますが、div のコンテンツをスクロールすると、グラデーションの下部が移動します。コンテンツがグラデーションとは無関係にスクロールするように、そのままにしておく必要があります。position: fixed、position: relative、およびのいくつかの組み合わせを試しましたがposition: relatve、役に立ちませんでした。私は何を逃したのですか？

関連するマークアップ:

関連する CSS:

結果：

はとborder-top-colorはです。グラデーションは、およびの上部の色から下部の色に移行することを目的としています。#9b9c9dborder-bottom-color#f6f9fcborder-leftborder-right

border-left-imageと とborder-right-imageをborder-top-colorどのように組み合わせるのborder-bottom-colorですか?

HTML

CSS

私は 2 日間インターネットを精査しましたが、私の問題に対する答えを見つけることができませんでした: CSS 線形グラデーションは、どのブラウザーでも私のコードで機能しません。動作するフィドルや、動作する他の Web サイトでグラデーションを見てきました。彼らのコードをコピーして私のコードに貼り付けてみましたが、うまくいきません。フォールバック用の無地の背景色のみを取得します。何かが PEBCAK エラーでないことを確認するために、スペルをトリプルチェックしました...コードをフィドルに入れようとしたとき、それでも機能しませんでした。私は困惑しています...誰かが私が間違っていることを見ていますか?

私の研究の道のりは、グラデーションには高さが必要であると説明した回答 here から始まりました。その後、ほとんどの人が div でグラデーションを使用していることがわかったので、テスト div を追加して高さを 100px に設定して試してみました。何も機能していません。これが私の現在のテストコードです：

私のHTML：

CSS:

ボディは本当に私が気にかけているものです (ページの背景を設定するため)。別のページからのコピーと貼り付けとして、名前の付いた色だけを使用してグラデーションクラスを使用して div を追加して、機能するかどうかを確認しました。

はい、下位互換性がないことはわかっています。自分で正常に動作するようになったら、そこに到達します。Windows 10でChromeバージョン50.0.2661.75 mを実行しています。IE（Edge）とFirefoxでもテストしました...グラデーションのヒントさえ見られません。Chrome の -webkit- プレフィックスを試してみて、それが機能するかどうかを確認しました...サイコロはありません。

これは、誰でも遊べる上記のコードのフィドルです: https://jsfiddle.net/e0p48ubf/2/

以下のように複数のグラデーションを作成する必要があります。

灰色/白のグラデーションの中心がどのように異なるかを見てみましょう。中心から来る場合もあれば、左中央から来る場合もあれば、中央下から来る場合もあります。

THISツールを使用して、以下のグラデーションを生成しました。

FIDDLE HERE、上の画像で示したようにグラデーションを作成できるようになりましたか、それとも画像を使用する必要がありますか?

私はブートストラップ ベースの Web ページに取り組んでおり、CSS ファイルには次のコードがあります。

ページの背景としてグラデーションを適用しますが、他にも 2 つのグラデーションがあります。

と

そして今、ユーザーがページを更新するときに、これらの 3 つのグラデーションのいずれかをランダムに適用したいと考えています (たとえば、最初に 2 番目のグラデーションを表示し、次にページを更新して 3 番目のグラデーションを表示するなど)。

どうすればこの効果を達成できますか?

このコードを使用して背景画像にグラデーションを付けようとしています

画像を取得していますが、グラデーションが適用されていません