Html 用css制作渐变背景填充页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16841323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making gradient background fill page with css
提问by adrift
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:
html：
<!DOCTYPE html>
<head>
<meta charset = "UTF-8"/>
<title>Home</title>
<link rel="stylesheet" text="text/css" href="css.css">
</head>
<body>
</body>
CSS:
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);
}
回答by Techno.Shaman
As of today, none of the above are working. The linear gradient is repeating itself.
截至今天，上述方法均无效。线性渐变正在重复。
To stretch the gradient over the entire page you have to add this in the css:
要在整个页面上拉伸渐变，您必须在 css 中添加：
body {
background: linear-gradient(to left top, blue, red) fixed;
}
That's all.
就这样。
回答by adrift
To have the gradient fill the viewport, give the <html>element a height of 100%: fiddle
要让渐变填充视口，请为<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);
}
To prevent the gradient from repeating past the visible section of the viewport (assuming there was a scrollbar), replace height: 100%;with min-height: 100%;.
为防止渐变重复超过视口的可见部分（假设有滚动条），请替换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);
}回答by CodeEngie
I agree with Adrift, adding height: 100% to the html tag will stretch the gradient. You can also remove the background-size: cover. This also works:
我同意 Adrift，在 html 标签中添加 height: 100% 会拉伸渐变。您还可以删除背景大小：封面。这也有效：
html {
height: 100%;
}
body {
width: 100%;
background: linear-gradient(to left top, blue, red);
}
You should be able to add the rest of the linear gradients for other browsers without any issues. Hope this helps!
您应该能够为其他浏览器添加其余的线性渐变而不会出现任何问题。希望这可以帮助！
回答by Jeffrey
In case anyone needs it still:
如果有人仍然需要它：
I got mine to work by increasing the height of the section which has the gradient background to above 200%.
我通过将具有渐变背景的部分的高度增加到 200% 以上来让我的工作。
(I included the no repeat and cover but it had no effect)
（我包括了不重复和覆盖但它没有效果）
mySection {
width: 100%;
height: 220%;
background: linear-gradient(90deg, rgb(23, 156, 57) 5%, rgb(33, 211, 27) 60%)
center center no-repeat/ cover;
}
回答by Erik Burns
None of the above answers were 100% satisfying to me, because I wanted a bit more precise control over the gradient and background colors. Here were my own requirements, and how I solved it in code:
以上答案都没有让我 100% 满意，因为我想要更精确地控制渐变和背景颜色。这是我自己的要求，以及我如何在代码中解决它：
- If content is < 100% viewport height, gradient scales to fill viewport
- If content is >= 100% viewport height, gradient scales with content w/o repeat
- If user drags up or down on viewport, they see a custom color (not white)
- 如果内容 < 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 */
}
While I am generally not a fan of extra wrappers in markup, they did allow me to achieve full control of the viewport, full page, and background drag coloring, with the added benefit of slightly simplified CSS. Enjoy!
虽然我通常不喜欢标记中的额外包装器，但它们确实让我能够完全控制视口、整页和背景拖动着色，并具有稍微简化的 CSS 的额外好处。享受！
回答by imatwork
This is a great answer for this: https://css-tricks.com/perfect-full-page-background-image/
这是一个很好的答案：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;
}
-60degSo it puts a 120 degree angle (a bit like that -> / ) on the right side of my page, hence the minus and puts it at 30%of the page from the right side with the colour #23e2cb. So I am setting the other colour to black with a gradient of 30%so the line stays defined. If I set the black to 40%there is no definition in the line, it uses that extra 10%to gradually change from black to blue.
-60deg所以它在我的页面右侧放置了一个 120 度角（有点像 -> / ），因此减去并将它30%从右侧放置在页面的颜色为#23e2cb. 所以我将另一种颜色设置为黑色，渐变为 ，30%以便线条保持定义。如果我将黑色设置40%为行中没有定义，它会使用额外10%的部分逐渐从黑色变为蓝色。
