CSS3渐变只是重复细线很多次
我正在尝试为我的网站制作渐变背景， http://www.lathamcity.com
问题是，如您所见，它只是重复蓝色和青色多次，而不是用它们制作渐变。
更神秘的是，当单击两个链接打开第三个 div 时，渐变突然发生变化。第三个 div 延伸到第二个 div 下方，它们之间的距离被第一个渐变颜色占据，其余到页面顶部的只是普通渐变。
这是我用于渐变的代码。
body{
background-color: #1B0D70;
background-image: linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -o-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -moz-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -webkit-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -ms-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.49, rgb(214,231,232)),
color-stop(0.75, rgb(36,155,171))
);
}
I'm trying to make a gradient background for my website, http://www.lathamcity.com
The problem is, as you can see, it just repeats the blue and cyan a bunch of times instead of making a gradient out of them.
To add to the mystery, when two links are clicked on to open a third div, the gradient suddenly changes. The third div extends below the second one, and the distance between them is occupied by the first gradient color and the rest up to the top of the page is just a normal gradient.
Here's the code I'm using for the gradients.
body{
background-color: #1B0D70;
background-image: linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -o-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -moz-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -webkit-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -ms-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.49, rgb(214,231,232)),
color-stop(0.75, rgb(36,155,171))
);
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
目前，您的
body height为0px，因为您的大部分元素都是绝对位置。在你的 CSS 中写下：
Currently your
body heightis0pxbecause your most of the element areabsolute position.Write this in your css: