css - Google Chrome 中的线性渐变不准确

标签 css linear-gradients

我在 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/

你可以在图中看到问题:

enter image description here

enter image description here

即使将渐变设置为以 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/

相关文章:

javascript - CSS 动画重置变换

css - 如何始终拥有 40-70 个字符宽的页面?屏幕、移动、打印

javascript - 我们如何修复垂直对齐 : middle; css property without giving height?

html - 我怎样才能在不破坏行的情况下响应地缩小 div 中的所有子 <img>

javascript - 文字渐变: cross-browser wrap text

css - 如何在 CSS 中悬停时使用渐变滑入和滑出按钮动画

javascript - 如何制作动画虚线 svg 线?

javascript - 在刷新时更改渐变颜色但保持光标位置元素处于事件状态?

css - 线性,右渐变到透明渐变,底部有额外渐变

css - 如何在某些文本下方使用线性渐变?