Question

我试图设置页面渐变样式的整个背景，但是，它看起来像这样http://imgur.com/kr0YnPl

CSS：

#gradient {

  background: #00BFFF;
  background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
  background: linear-gradient(to right bottom, #086A87, #00BFFF);
  border-radius: 2px;
}

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
    <!--        Reset CSS-->
    <link rel="stylesheet" href=".../public/stylesheets/css_reset.css">
    <!--        Main CSS-->
    <link rel="stylesheet" href=".../public/stylesheets/main.css">
</head>
<body id="gradient">
<p>Hello World!</p>
</body>


</html>

我意识到，如果我添加height: 880px;或某种尺寸的高度，它将看起来像http://imgur.com/AkUdK3e，这就是我希望它看起来的样子。但有没有办法在不设置height的情况下执行此操作？我试过了

background-image: linear-gradient(to right bottom,#086A87, #00BFFF);

但它仍然看起来像第一个链接，除非我添加height。找到我的页面的高度很烦人，我不想添加任何额外的高度，因为你可以看到我可以在第二张图片中向下滚动。如果添加height是唯一的方法，那么定义页面高度的好方法是什么，无法向上/向下或向左/向右滚动？

感谢。

Answer 1

这里是给你的答案

http://codepen.io/vilaskumkar/pen/bNjzVb

html, body {
    height: 100%;
}
body {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Answer 2

如果您不想填充身体，可以设置css属性：

background-size: 100vw 100vh;

这会强制背景的大小为视口的100％。

如果您不想重复背景（如页面滚动）：

 background-repeat: no-repeat;

Answer 3

请尝试以下操作： Demo

CSS：

html {
    height: 100%;
}
body {
    margin: 0;
    background: #00BFFF;
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
    background: linear-gradient(to right bottom, #086A87, #00BFFF);
    border-radius: 2px;
    background-size:100% 100%;
    background-repeat: no-repeat;
}

HTML：

<body>
    <p>Hello World!</p>
</body>

Answer 4

更新你的css：

#gradient {
  background: #00BFFF;
  background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
  background: linear-gradient(to right bottom, #086A87, #00BFFF);
  border-radius: 2px;
  background-repeat: repeat;
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

CSS渐变背景不完整

4 个答案: