CSS梯度出现不需要的颜色.仅影响铬

Question

我只是在CSS中注意到了这个小故障，但是唯一遇到麻烦的浏览器是Chrome。

小故障是出现在我#box

的左侧的纯灰色

我做了一个jsfiddle来复制错误：

http://jsfiddle.net/mar6e/

我希望梯度是白色（#ffffff），然后在最后92％淡入#f4f4f4然后淡出#dddddd。

这可以正常工作，直到我在其中添加该图像，然后将图像的位置设置为10px 17px。

我猜Chrome将背景梯度定位为与所有其他浏览器相反。

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

Answer 1

在您的小提琴和代码中，您忘了设置所谈论的位置。

但是我的超自然力量让我猜想你有：

#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个背景...