gpt4 book ai didi

css - 渐变背景未拉伸(stretch)以覆盖从上到下

转载 作者:行者123 更新时间:2023-11-28 03:27:54 24 4
gpt4 key购买 nike

我正在尝试实现渐变色背景。这是相关代码。

#grad {
background: -webkit-linear-gradient(red, white, blue);
background: -moz-linear-gradient(red, white, blue);
background: -o-linear-gradient(red, white, blue);
background: linear-gradient(red, white, blue);
}
<body id="grad">...</body>

但是,这只覆盖了我的导航栏之前的背景,然后背景又重复了一遍。我尝试了以下代码:

#grad {
background: -webkit-linear-gradient(red, white, blue);
background: -moz-linear-gradient(red, white, blue);
background: -o-linear-gradient(red, white, blue);
background: linear-gradient(red, white, blue);
height: 100%;
width: 100%;
left: 0px;
top: 0px;
z-index: 0;
position: absolute;
}
<body id='grad'>...</body>

然后背景就消失了。请帮忙。

最佳答案

如果您不希望它重复,只需将 no-repeat 添加到线性渐变的末尾即可。

例如:

background: linear-gradient(red, white, blue) no-repeat;

然后根据需要设置您的高度。

如果你想让它 height = 100% 然后用下面的 css 做一个 div 标签。

background: -webkit-linear-gradient(red, white, blue) no-repeat;
background: -moz-linear-gradient(red, white, blue) no-repeat;
background: -o-linear-gradient(red, white, blue) no-repeat;
background: linear-gradient(red, white, blue) no-repeat;
position: absolute;
height: 100%;
width:100%;
left:0;
top:0;

你不想让 body 成为绝对的。但是话又说回来,如果您要使用 div 标记以第二种方式进行操作,则不需要重复。

关于css - 渐变背景未拉伸(stretch)以覆盖从上到下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44887285/

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