CSSグラデーションの使い方を学んでいます。滑らかなCSSグラデーション
私の問題は、上から下のグラデーションです。 を参照すると、色が変わる「停止」が表示されます。
これは私のCSSコード
#header {
width:1000px;
height:250px;
background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599);
background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599);
}
ある下勾配にトップに停止を滑らかにする方法はありますか？ （これは、私の目には、左から右に、または右から左のグラデーションにはあまり見えません）
あなたの必要性を下に考えてください。
CSS：
#header {
width:1000px;
height:250px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EDD799), color-stop(1, #BF7F37));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #EDD799 0%, #BF7F37 100%);
}
は線形グラデーションの詳細情報： https://developer.mozilla.org/en-US/docs/CSS/linear-gradient
これは勾配を作るための私のお気に入りのツールです。特に、SASS/SCSS構文を出力するのが大好きです。
私はこのツールを知っていますが、私はちょうどCSSを通してそれをやっていることを学びたいと思っていました。ツールは時間を節約しますが、楽しくはありません。 ：D – Isuru
これはCSSによるものです。これは実際にさまざまなアプローチを学ぶのに役立ちます。 –
これが行います。ありがとうございました。 :) – Isuru
これは、表示されているカラーストップで指定された問題の解決策ではありません。グラデーション間でカラーストップを使用せず、エッジに移動させることをお勧めします。最初の0％、最後は100％です。質問の著者コードのようにカラーストップを移動すると、これを見ることができます：http://jsfiddle.net/zoaporx0/1/ –
答えはまったくありません。エッジはまだ見えています。 –