我在 Google Chrome 中的渐变遇到了一些问题:
body {
background-image: linear-gradient(rgba(43,66,88,0) 144px,#f4f7fa 144px), radial-gradient(at top center, #44698b,#162a3c);
}
.header {
height: 144px;
}
.main {
height: 500px;
}
HTML:
<div class="header"></div>
<div class="main"></div>
实时查看:http://jsfiddle.net/p726s/
你可以在图中看到问题:
即使将渐变设置为以 144px
结束,并且下一个颜色从完全相同的像素开始,Chrome 也会创建一个小渐变,以便第一个颜色不会以 144px 结束
但位于 142px
。接下来的两个像素将创建到第二种颜色的渐变,而不是创建直线。我不知道如何强制浏览器不这样做。有人有什么建议吗?
2016 年 7 月 6 日编辑:
谷歌似乎在过去几个月已经解决了这个问题......
最佳答案
我自己安装的 Chrome 没有出现此问题;您的 Chrome 浏览器是否已更新至最新版本 (33.0.1750.154m)?
我意识到您网站上的某些人可能没有(或不愿意)更新他们的 Chrome 安装(例如,他们关闭了 Google 更新),但是众所周知,Chrome 对某些内容很挑剔,您可能只是偶然发现了一件它不喜欢的事情。
另外,请重新表述您的问题;我只能只是看到你的梯度的差异,而有些人(比如 King King,他回复了你的OP)可能看不到差异。
关于css - Google Chrome 中的线性渐变不准确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22722842/