0

私は Web 開発の初心者で、自分の個人的な Web サイトのコーディングを始めたばかりです。私は、html や css の構文をまったく知りません。オンラインでチュートリアルを読んだり見たりして、ウェブサイトの背景グラデーションを作成できましたが、グラデーションが思い通りに動作しません。ブラウザ ウィンドウのサイズを変更しても、グラデーションの比率を維持したい。現在、ウィンドウのサイズに応じてグラデーションが引き伸ばされています。

助けてください。これが私がこれまでにCSS用に持っているコードです

 html {
    height: 100%;
    background: #499bea;
}

body
{
    float:left;
    position:relative;
    height: 100%;
    width: 100%;
    background-position: 0px 0px;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background: #499bea;
    background: -moz-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, , color-stop(0%, #499bea), color-stop(100%, #00438a));
    background: -webkit-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -o-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -ms-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: radial-gradient(ellipse at center, #499bea 0%, #00438a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#00438a', GradientType=1 );

}
4

2 に答える 2

0

高さを取り除き、背景サイズをカバーに切り替え、その他のいくつかの調整を行うと、うまくいくはずです。

 html {
height: 100%;
background: #499bea;
}

body
{
    float:left;
    position:relative;
    /* Removed height */
    width: 100%;
    margin: 0;
    background: no-repeat center center fixed;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background: #499bea;
    background: -moz-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, , color-stop(0%, #499bea), color-stop(100%, #00438a));
    background: -webkit-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -o-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -ms-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: radial-gradient(ellipse at center, #499bea 0%, #00438a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#00438a', GradientType=1 );

}

.container { height: 900px; }

JSFiddle: http://jsfiddle.net/LJY9y/

于 2014-06-14T22:23:42.813 に答える
0

引き延ばしたくない場合は、circle代わりにellipse次を使用します。

background: radial-gradient(circle at center, #499bea 0%, #00438a 100%);

デモ

于 2014-06-14T22:23:58.830 に答える