html - 不需要的颜色出现在 CSS 渐变中.. 只影响 Chrome

Question

我刚刚注意到我的 CSS 中存在这个小故障，但唯一有问题的浏览器是 Chrome。

故障是出现在我的#box

左侧的纯灰色

我制作了一个 JSFiddle 来复制错误:

http://jsfiddle.net/mar6E/

我希望渐变为白色 (#ffffff)，然后在最后 92% 渐变为 #f4f4f4 然后 #dddddd.

在我将图像添加到那里，然后将图像的位置设置为 10px 17px 之前，一切正常。

我猜 Chrome 定位背景渐变与所有其他浏览器不同。

非常感谢任何解决方法/建议!谢谢!

Answer 1

在你的 fiddle 和你的代码中，你忘记了设置你所说的位置。

但我的超自然力量让我猜你有:

#box {
    height: 200px;
    width: 200px;
    background: url(http://braidio.com/images/icon-dashboard.png) no-repeat, linear-gradient(to right, #ffffff 80%, #f4f4f4 92%, #dddddd 100%);
    border: 1px solid blue;
    background-position: 10px 17px;
}

当你应该有:

#box {
    height: 200px;
    width: 200px;
    background: url(http://braidio.com/images/icon-dashboard.png) no-repeat, linear-gradient(to right, #ffffff 80%, #f4f4f4 92%, #dddddd 100%);
    border: 1px solid blue;
    background-position: 10px 17px, 0px 0px;
}

如果只设置一个背景位置，会影响2个背景...