-1

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

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

私のHTML：

<body>
<div>

    <div class="gradient">
        This is a test
    </div>

</div>
</body>

CSS:

*, html {
margin:0;
padding:0;
font-family:Calibri;
}

body {
min-height: 100vh;
background: #64647f;
background: linear-gradient (to bottom, #64647f 0%, #b2b2c2 20%);
}

.gradient {
border: 1px solid black;
height: 100px;
background: linear-gradient (red, yellow);
}

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

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

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

4

2 に答える 2

0

グラデーション宣言と括弧の開始の後のスペースを削除する必要があります。

background: linear-gradient(下へ、#64647f 0%、#b2b2c2 20%);

背景：線形グラデーション（赤、黄）;

于 2016-04-21T14:55:29.397 に答える