gpt4 book ai didi

html - 应用于 body 时线性渐变不起作用

转载 作者:行者123 更新时间:2023-11-28 04:10:19 27 4
gpt4 key购买 nike

当我在 CSS 中对主体应用线性渐变时,如下所示

body 
{
background: linear-gradient(#10416b, black);
}

它不会将它应用到整个网页,而是将它应用到页面的前半部分,然后从下半部分开始从蓝色到黑色,(#10416b 是蓝色).添加高度:100%;对 body 没有任何改变。

我通过在 CSS 中执行以下操作解决了这个问题

.background {
background: linear-gradient(#10416b, black);
height: 100%;

}

这是 HTML

<!DOCTYPE html> 
<html class="background">
// lots of unrelated code in between the tags
</html>

但是我还是不明白为什么在body中用线性渐变设置背景不起作用。如果有人可以向我解释这一点,那就太好了。

最佳答案

使用 100vh 而不是 100%

   body {
height: 100vh;
background: linear-gradient(#10416b, black);
}

https://jsfiddle.net/r77r0cco/1/

body本身并没有高度,因此它会查看其父元素 <html>其中,因为它没有内容,所以也没有高度。

vh使用视口(viewport)尺寸而不是父元素的

关于html - 应用于 body 时线性渐变不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36020521/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com