中心背景渐变答案

【问题标题】：Center background gradient中心背景渐变
【发布时间】：2014-06-14 22:14:34
【问题描述】：

我是 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 );

}

【问题讨论】：

不要floatbody，这毫无意义。
@MarcAudet 绝对正确，但这与答案无关（因此在评论中），对吧？就我个人而言，这个问题中的“相同比例”对我来说没有意义。
请注意，如果您使用background，您将覆盖所有以前的background-* 属性。使用background-image 进行渐变，或者如果您不需要其他属性，则删除它们。

标签： html css center radial-gradients

【解决方案1】：

摆脱高度并将背景大小切换为覆盖以及其他一些调整应该可以解决问题：

 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/

【讨论】：

【解决方案2】：

如果不希望它被拉伸，请使用circle 而不是ellipse：

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

Demo

【讨论】：