gpt4 book ai didi

html - 中心背景渐变

转载 作者:行者123 更新时间:2023-11-28 10:15:38 26 4
gpt4 key购买 nike

我是网络开发的新手,我刚刚开始为自己的个人网站编写代码。我绝对不知道 html 或 css 的任何语法。通过在线阅读和观看教程,我成功地创建了我网站的背景渐变,但渐变的表现并不如我所愿。我希望在调整浏览器窗口大小时渐变保持相同的比例。现在渐变会根据窗口大小进行拉伸(stretch)。

请帮忙。这是我到目前为止的 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 );

}

最佳答案

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

 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/

关于html - 中心背景渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24224796/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com