33

I have this gradient background but I don't want it to repeat the way it does to fill the page, I want it to be one large gradient that fills the page.

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/

4

7 回答 7

88

截至今天，上述方法均无效。线性渐变在重复。

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

body {
    background:            linear-gradient(to left top, blue, red);
    background-attachment: fixed; /*edit*/
}
于 2015-07-29T23:23:40.177 回答
64

要让渐变填充视口，请将<html>元素的高度设置为 100%：小提琴

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%;.

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);
}

于 2013-05-30T16:31:58.980 回答
6

我同意 Adrift，将 height: 100% 添加到 html 标签会拉伸渐变。您还可以删除背景大小：封面。这也有效：

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

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

于 2013-05-30T16:45:09.813 回答
4

遇到同样的问题，但只有这个工作，请添加这个样式

background-attachment: fixed;

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

于 2020-07-04T19:05:14.297 回答
2

以上答案都不是 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 的额外好处。享受！

于 2020-01-18T22:21:18.533 回答
1

这是一个很好的答案：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%的部分从黑色逐渐变为蓝色。

于 2020-04-15T10:48:18.483 回答
0

如果有人仍然需要它：

我通过将具有渐变背景的部分的高度增加到 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;
}
于 2019-07-03T15:13:54.990 回答