gpt4 book ai didi

CSS3渐变渲染从透明到白色的问题

转载 作者:行者123 更新时间:2023-11-28 03:08:42 27 4
gpt4 key购买 nike

我在跨浏览器呈现 CSS3 渐变时遇到问题。当我尝试创建从透明色到白色的渐变时,就会发生这种情况。

我用来测试的文件是: http://f.cl.ly/items/0E2C062x3O161b09261i/test.html

使用的 CSS 是:

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);

在 Safari 6 (mac) 中渲染看起来像我想要的: Safari 6 Mac OS 10.8

Chrome 渲染在淡化为白色之前淡化为灰色(Firefox 在 mac os 上也以这种方式呈现): Chrome 21 Mac OS 10.8

对于为什么会出现这种奇怪的渲染,您有什么想法或建议吗?

最佳答案

我也遇到过。我不确定为什么会这样,但这是我在自己的元素中使用的解决方法:

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);

与其给 Chrome 一个“透明”的值,不如给它一个非常非常接近透明的值。

编辑:我忘了发布我自己的链接 version ,在 Chrome 21 (Windows 7) 中按预期呈现。

关于CSS3渐变渲染从透明到白色的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45828673/

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