15

CSSグラデーションの使い方を学んでいます。

私の問題は、上から下へのグラデーションです。色の変化に「ストップ」が見られるだけです。

ここに画像の説明を入力

これは私のCSSコードです

#header { 
   width:1000px; 
   height:250px; 
   background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); 
   background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599); 
}

上から下へのグラデーションのストップを滑らかにする方法はありますか? （これは、私の目には、左から右または右から左のグラデーションではあまり見えません）

4

4 に答える 4

-3

以下のcssがあなたのニーズに合うと思います。

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%);
}

http://jsfiddle.net/xPLPH/

線形グラデーションの詳細: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

于 2012-10-31T04:54:11.657 に答える