Question

我正在为我的网站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))
);
}

Answer 1

目前您的body height为0px，因为您的大部分内容都是absolute position。

在你的css中写下这个：

html, body{
 height:100%;
}

CSS3 Gradient只是重复细线多次

1 个答案: