Question

我有这个渐变背景，但我不希望它重复填充页面的方式，我希望它是一个填充页面的大梯度。

HTML：

<!DOCTYPE html>
<head>
    <meta charset = "UTF-8"/>
    <title>Home</title>
    <link rel="stylesheet" text="text/css" href="css.css">
</head>
<body>
    </body>

CSS：

p {
    font-family:"Arial Black";
    line-height:120%;
}
html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

http://jsfiddle.net/F7vf9/

Answer 1

截至今天，上述情况均无效。线性渐变正在重复。

要在整个页面上拉伸渐变，您必须在css中添加它：

for i in xrange(1234567890, 9876543210 + 1):

这就是全部。

Answer 2

要让渐变填充视口，请为<html>元素指定100％的高度：fiddle

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

要防止渐变重复经过视口的可见部分（假设有滚动条），请将height: 100%;替换为min-height: 100%;。

Answer 3

我同意Adrift，添加高度：100％到html标签将拉伸渐变。您也可以删除背景尺寸：封面。这也有效：

html {
  height: 100%;
}
body {
  width: 100%;
  background: linear-gradient(to left top, blue, red);
}

您应该能够为其他浏览器添加其余的线性渐变而不会出现任何问题。希望这有帮助！

Answer 4

遇到相同的问题，但只有此问题有效，请添加此样式

background-attachment: fixed;

background-attachment属性设置背景图像是随页面其余部分滚动还是固定。共有三个值：scroll，fixed和local。

Answer 5

万一有人仍然需要它：

我通过将具有渐变背景的部分的高度增加到200％以上来使我工作。

（我没有重复和掩盖，但没有效果）

mySection {
    width: 100%;
    height: 220%; 
    background: linear-gradient(90deg, rgb(23, 156, 57) 5%, rgb(33, 211, 27) 60%)
                center center no-repeat/ cover;
}

Answer 6

以上答案都没有100％使我满意，因为我想对渐变色和背景色进行更精确的控制。这是我自己的要求，以及如何用代码解决它：

如果内容小于<100％视口高度，则渐变会缩放以填充视口
如果内容大于等于100％的视口高度，则渐变会缩放且内容不重复
如果用户在视口上向上或向下拖动，他们会看到自定义颜色（不是白色）

<html>
  <body>
    <div class="wrapper">
      <div class="content">
        <h1>Content goes here</h1>
      </div>
    </div>
  </body>
</html>

html {
  margin: 0; padding: 0;
}
body {
  margin: 0; padding: 0;
  background-color: blue;
}
.wrapper {
  padding: 0; margin: 0;
  min-height: 100%;
  background: linear-gradient(180deg, blue, red);
}
.wrapper .content {
  padding: 40px; /* Put any padding or styles here you want, it won't break gradient */
}

虽然我通常不喜欢标记中的额外包装，但是它们确实使我能够实现对视口，整页和背景拖动颜色的完全控制，并具有稍微简化的CSS的额外好处。享受吧！

Answer 7

这是一个很好的答案：https://css-tricks.com/perfect-full-page-background-image/

html {
  background: linear-gradient(-60deg, #23e2cb 30%, black 30%), transparent 0;
  background-repeat:no-repeat;
  min-height: 100%;
  min-width: 1024px;

  width: 100%;
  height: auto;
}

-60deg因此，它在页面的右侧放置了120度角（有点像-> /），因此减去了负号并将其放置在页面的30%的右侧侧面带有颜色#23e2cb。因此，我将另一种颜色设置为30%的黑色，以使线条保持定义。如果我将黑色设置为40%，则该行中没有定义，它将使用多余的10%从黑色逐渐变为蓝色。

用css制作渐变背景填充页面

7 个答案: