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

CSS渐变中出现不需要的颜色..仅影响Chrome

1 个答案: