gpt4 book ai didi

CSS背景从上到下线性渐变

转载 作者:技术小花猫 更新时间:2023-10-29 10:35:50 25 4
gpt4 key购买 nike

我正在尝试创建一个从上到下的线性渐变,例如:

Gradient I want!

不幸的是我得到的是:

Gradient I get

以下是我的HTML:

<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
Hi
</body>
</html>

还有我的 CSS:

body{
background: linear-gradient(0deg, white, blue 80%) ;
}

如果我做 90deg,而不是 0deg,那么我会得到这个:

Gradient with 90deg

我需要这个渐变 - 但它应该旋转 90 度,即从上到下而不是从左到右。我很好奇为什么 0deg 似乎给出了类似于重复渐变的东西。

我使用过浏览器,Firefox 21 和 Chrome 27。如果有任何建议,我将不胜感激。

最佳答案

尝试在 <html> 上设置背景相反 - 可能更容易管理。然后给它一个 height:100%;同样,它肯定会扩展整个页面。

我也设置为no-repeat所以当你有更长的内容时,你只会得到一个渐变,而不是从底部开始。

html{
height:100%;
background: linear-gradient(0deg, white, blue 80%) no-repeat;
}

http://jsfiddle.net/daCrosby/nEQeZ/1/

编辑

fr13d 在评论中指出,将渐变放在 html 上时在任何滚动之前,渐变将停止在第一页的底部。也就是说,当您滚动时,渐变会被切断(如果背景颜色与渐变的较低颜色不同,则很明显)。

解决此问题的一种方法是将样式放在 body 上相反:

body{
height:100%;
background: linear-gradient(0deg, yellow, blue 80%) no-repeat;
}

http://jsfiddle.net/daCrosby/nEQeZ/117/

关于CSS背景从上到下线性渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17179881/

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