gpt4 book ai didi

html - CSS 渐变在 Chrome 49 中不起作用

转载 作者:可可西里 更新时间:2023-11-01 13:03:30 26 4
gpt4 key购买 nike

我要使用线性渐变作为我的body 的背景。它在 Safari 中有效,但在 Chrome 中无效。我已经搜索过 Stack Overflow,但到目前为止对我没有任何帮助。它仅适用于 Chrome(Chrome 49)以外的浏览器。

我尝试使用的代码是由旨在支持所有浏览器的生成器生成的。

body {
background: rgba(121, 91, 176, 1);
background: -moz-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(121, 91, 176, 1)), color-stop(66%, rgba(74, 193, 255, 1)), color-stop(92%, rgba(76, 234, 255, 1)), color-stop(100%, rgba(76, 234, 255, 1)));
background: -webkit-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
background: -o-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
background: -ms-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
background: linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#795bb0', endColorstr='#4ceaff', GradientType=1);
}

下面是重现问题的 HTML:

<!DOCTYPE html>
<html>
<head>
<title>Site</title>
<meta name="robots" content="noindex">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<!-- JS WARN -->
<div>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Verpz/Javascript-Disabled-Warning-Popup/b10b9ebe28a92ffe746eb7e6fb6e0d3497c3afdd/js-warn.css">
<input type="checkbox" id="js-hide" />
<div class="js-warn" id="js-warn-exit"><h1>Javascript Is Disabled</h1><p>Javascript seems to be disabled. This will break some site features.</p>
<p>To enable Javascript click <a href="http://www.enable-javascript.com/" target="_blank">here</a></p><label for="js-hide">Close</label></div>
<script>var jswarn = document.getElementById("js-warn-exit"); jswarn.parentNode.removeChild(jswarn);</script>
</div>
<!-- /JS WARN -->
</body>
</html>

任何建议都会很棒。谢谢。

最佳答案

通常,body 标签本身没有任何高度,所以渐变不会显示,我们必须向它添加一些内容(或)给它一些明确的高度.添加一个固定的高度值可能并不总是可行的,因此最好添加一个 min-height: 100vh(也就是说,高度至少与视口(viewport)的高度一样多)。

注意:该行为在 IE、Edge、Firefox 和 Chrome 中是一致的。我试图找出为什么 Safari 以不同的方式处理它。一旦我得到信息,我会将其编辑到答案中。

body {
min-height: 100vh;
background: rgba(121, 91, 176, 1);
background: -moz-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(121, 91, 176, 1)), color-stop(66%, rgba(74, 193, 255, 1)), color-stop(92%, rgba(76, 234, 255, 1)), color-stop(100%, rgba(76, 234, 255, 1)));
background: -webkit-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
background: -o-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
background: -ms-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
background: linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#795bb0', endColorstr='#4ceaff', GradientType=1);
}

关于html - CSS 渐变在 Chrome 49 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36099488/

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