应用于身体时线性渐变不起作用
[英]linear-gradient doesn't work when applied to body
问题描述
When I apply a linear gradient to the body in CSS like below
当我在 CSS 中对身体应用线性渐变时，如下所示
body
{
background: linear-gradient(#10416b, black);
}
It doesn't apply it to the entire web page, instead what happens is it is applied to the first half of the page, and then starts over from blue to black for the second half, (#10416b is a blue color).它不会将它应用于整个 web 页面，而是将它应用于页面的前半部分，然后在后半部分从蓝色开始重新变为黑色（#10416b 是蓝色）。 Adding in height:100%;添加高度：100%； to the body doesn't change anything.对身体没有任何改变。
I fixed the problem by doing the below in CSS我通过在 CSS 中执行以下操作解决了问题
.background {
background: linear-gradient(#10416b, black);
height: 100%;
}
and this in HTML这在 HTML
<!DOCTYPE html>
<html class="background">
// lots of unrelated code in between the tags
</html>
But I still don't understand why setting the background with the linear gradient in the body didn't work.但是我还是不明白为什么在body中用线性渐变设置背景不起作用。 If somebody could explain this to me that would be great.如果有人可以向我解释这一点，那就太好了。
3 个解决方案
解决方案1
7 已采纳 2016-03-15 19:44:09
Use 100vh instead of 100% 使用100vh代替100％
body {
height: 100vh;
background: linear-gradient(#10416b, black);
}
https://jsfiddle.net/r77r0cco/1/ https://jsfiddle.net/r77r0cco/1/
body in and of itself doesn't have a height, so it looks to its parent element <html> which, because it has no content, also has no height. body本身没有高度，因此它查找其父元素<html> ，因为它没有内容，所以也没有高度。
vh uses the viewport dimensions instead of a parent element's vh使用视口尺寸而不是父元素的尺寸
解决方案2
2 2016-03-15 19:45:17
The body has no height of it's own as such without the HTML having a height or the body containing content.Then the gradient will repeat because repeat is the default in the background shorthand property. 没有HTML的高度或包含内容的主体，主体本身就没有高度，然后渐变将重复，因为repeat是background速记属性中的默认值。
html { height: 100%; } body { background: linear-gradient(#10416b, black); }
解决方案3
0 2022-05-06 19:53:24
Firstly, I'd like to thank @Paulie_D who inspired me to come up with this answer.首先，我要感谢@Paulie_D，是他启发了我得出这个答案。
Below you can see 2 methods to get your body have a gradient background.下面你可以看到两种让你的身体有渐变背景的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My awesome webpage</title>
<style>
html {
min-height: 100%; /* Unlike 'height', which is used by
@Paulie_D, this will make your webpage
automatically resize when it exceeds
the 100% height, thus it won't start the
gradient over
*/
}
body {
background: linear-gradient( 180deg,
#C0C0AA 0%,
#1CEFFF 100%
);
}
/***** Content design *****/
#hello {
font-family: sans-serif;
font-size: 5em;
text-align: center;
color: #424242;
text-shadow: 0 0 1rem darkgray;
transition: 0.25s;
}
#hello:hover {
font-size: 100vh;
color: darkgray;
}
</style>
</head>
<body>
<div id="hello">Hover and scroll!</div>
</body>
</html>
This method will automatically resize the gradient to fit the whole content.此方法将自动调整渐变大小以适应整个内容。
If you want the gradient to be the size of the window height, you can use a `::before` pseudoelement on `body`, to draw a fix-positioned gradient with a `z-index` of `-1`.
如果你希望渐变的大小为 window 高度，你可以在 `body` 上使用 `::before` 伪元素，绘制一个 `z-index` 为 `-1` 的固定位置渐变。
Like this:
像这样：
<:DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My awesome webpage</title> <style> body::before { content; "": background, linear-gradient( 180deg, #C0C0AA 0%; #1CEFFF 100% ): top; 0: bottom; 0: left; 0: right; 0: position; fixed: z-index; -1: } /***** Content design *****/ #hello { font-family; sans-serif: font-size; 5em: text-align; center: color; #424242: text-shadow; 0 0 1rem darkgray: transition. 0;25s: } #hello:hover { font-size; 100vh: color; darkgray; } </style> </head> <body> <div id="hello"> Hover and scroll! </div> </body> </html>
Sorry, I don't usually answer Stack Overflow questions, but this was a top result of a Google query, so I couldn't resist.抱歉，我通常不回答 Stack Overflow 的问题，但这是 Google 查询的最高结果，所以我无法抗拒。 If you can improve this answer, please request an edit.如果您可以改进此答案，请请求修改。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.