gpt4 book ai didi

css - 无法使 CSS 垂直线性背景渐变在所有主流浏览器中正确显示

转载 作者:太空宇宙 更新时间:2023-11-03 19:34:59 25 4
gpt4 key购买 nike

我让它在 Firefox 中准确显示我想要的方式,但是对于其他所有浏览器似乎都存在一些问题。这个网站并不是完全公开的(因为没有人知道它),因为我仍在努力让事情正常显示,但 URL 是:http://www.mixbin.net (只需查看:源代码 - 没有任何服务器端干扰)

Firefox:完美。
Chrome:完美,除了底部边距在 .content 类中被忽略。
Opera:完美,除了底部边距在 .content 类中被忽略。
Safari:正确显示渐变,但在您向下滚动页面一半时强制刷新。
Internet Explorer:正确显示渐变,但 .content div 在渐变停止的地方被截断。

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

没有想要的图片。所以请不要回复“只做一张背景图片”。

更新 2:现在一切正常(包括 IE)。我将这两行从:

    background:-webkit-linear-gradient(top,#000000 0,#353535 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,#353535));

收件人:

    background:-webkit-linear-gradient(top, #000000, #353535);
background:-webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535));

最佳答案

如果您的渐变 CSS 是:

background: linear-gradient(top, #000000 0%, #353535 512px);

不需要 <div>高度为 512px。遗憾的是,此解决方案适用于除 IE 之外的所有浏览器。

回到你的额外背景<div>方法。我稍微复制并修改了您的代码。这适用于所有浏览器。

body {
background: #353535;
}
.content {
background-color: white;
height: 1000px;
margin: 20px auto;
width: 300px;
z-index: 2;
position: relative;
}
#background {
position: absolute;
top: 0;
height: 512px;
width: 100%;
background: linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
background: -moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
background: -ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
background: -o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
background: -webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#353535', GradientType=0); /*IE6-9*/
}
<body>
<div id="background"></div>
<div class="content"></div>
</body>

关于css - 无法使 CSS 垂直线性背景渐变在所有主流浏览器中正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9551971/

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