gpt4 book ai didi

html - 没有出现 CSS 渐变

转载 作者:太空宇宙 更新时间:2023-11-03 23:49:42 24 4
gpt4 key购买 nike

我正在做一个元素,我必须在其中对页面主体应用线性渐变。渐变不会出现在页面上。

我首先认为问题出在我的代码中(尽管浏览器没有检测到语法错误),但它对文档或梯度生成器中的代码示例都不起作用。这是我的 CSS 代码(由生成器提供):

body
{
background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
}

而且……主体背景是不可见的。问题不是来自 html 代码,因为当我通过类似的方式更改 CSS 时:

body
{
background: #ff0000;
}

或者使用背景图片就可以了...当然,我在不同的机器上尝试过,使用不同的浏览器,从最新的到旧的,但都没有用。我真的不知道发生了什么,但这让我发疯:除了渐变之外一切正常,错误控制台不显示任何错误;我想我已经尝试了我所知道的一切,但我仍然被困住了。感谢您的帮助。

编辑:

完整代码如下:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>test</p>
</body>
</html>

样式.css

body
{
margin: 0;
padding: 0;
font: 15px/1.5 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #4E443C;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);

background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */

}

它在 firefox 25.0.1 中的显示方式:

ff

编辑 2:

在 Firebug 中,我有这个:

firebug

这意味着渐变由浏览器计算...但显然没有渲染...

最佳答案

我注意到如果 margin 为 0,则在 body 上设置渐变不起作用。

body
{
margin:0;
background:linear-gradient(45deg,red,blue);
}

但是,在 html 上设置 height:100% 可以使其正确呈现。希望对您有所帮助。

html
{
height:100%;
}

关于html - 没有出现 CSS 渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20491034/

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