gpt4 book ai didi

css - 梯度不适用于位置 :absolute

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

我正在尝试使用线性渐变作为我的页面背景。渐变根本没有显示,背景仍然是白色。这是重现问题的最少代码:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<style type="text/css">
body
{
width:100%;
margin-left:-50%;
position:absolute;
left:50%;
background: rgb(0, 0, 0);
background: -moz-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: -webkit-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: -o-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: -ms-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: linear-gradient(0deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);

}
</style>
</head>
<body>

This is a test and a bad one at that.

</body>
</html>

现在,如果我删除 position:absolute,渐变就会起作用。我究竟做错了什么?我需要那个 position:absolute,那我该怎么办?

编辑:在 Chrome 和 Firefox 中试过。

最佳答案

如果不设置 html 背景,body 的背景将应用于 HTML。

由于 body 是绝对的,它的 HTML 大小为 0,并且不会触发 HTML 布局的任何内容。

尝试应用:html {height:100%;}看看它做了什么:http://codepen.io/anon/pen/JGApK

关于css - 梯度不适用于位置 :absolute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21415522/

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