Question

我正在尝试实现渐变色背景。这是相关的代码。

#grad {
  background: -webkit-linear-gradient(red, white, blue);
  background: -moz-linear-gradient(red, white, blue);
  background: -o-linear-gradient(red, white, blue);
  background: linear-gradient(red, white, blue);
}

<body id="grad">...</body>

然而，这仅覆盖我的导航栏的背景，然后背景重复。我尝试了以下代码：

#grad {
  background: -webkit-linear-gradient(red, white, blue);
  background: -moz-linear-gradient(red, white, blue);
  background: -o-linear-gradient(red, white, blue);
  background: linear-gradient(red, white, blue);
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: 0;
  position: absolute;
}

<body id='grad'>...</body>

然后背景就消失了。请帮忙。

Answer 1

如果您不想重复，只需在线性渐变的末尾添加无重复。

例如：

background: linear-gradient(red, white, blue) no-repeat;

然后将你的身高设置为你想要的任何东西。

如果你想使它高度= 100％，那么只需使用以下css制作一个div标签。

background: -webkit-linear-gradient(red, white, blue) no-repeat;
background: -moz-linear-gradient(red, white, blue) no-repeat;
background: -o-linear-gradient(red, white, blue) no-repeat;
background: linear-gradient(red, white, blue) no-repeat;
position: absolute;
height: 100%;
width:100%;
left:0;
top:0;

你不想让身体变得绝对。但是如果你用div标签做第二种方式，那么你再也不需要重复了。

Answer 2

body只有内容的高度，即使您将高度设置为100％，浏览器也必须知道100％的内容。

在这种情况下，它将是父html元素，其高度必须设置为100％。

＆＃13;

html {
  height: 100%;
}

#grad {
  background: -webkit-linear-gradient(red, white, blue);
  background: -moz-linear-gradient(red, white, blue);
  background: -o-linear-gradient(red, white, blue);
  background: linear-gradient(red, white, blue);
}

＆＃13;

<body id="grad"></body>

＆＃13;

渐变背景不伸展覆盖从上到下

2 个答案: