CSS 规则在某些浏览器上生成 404 错误

Question

在我的服务器日志中，我收到很多这样的错误:

File does not exist: /my/path/-moz-linear-gradient(top,white,

这显然是由于以下一段 Bootstrap CSS，其中一些浏览器必须将 -moz-linear-gradient 解释为要下载的背景图像:

.btn{
/* some code... */
background-color: whiteSmoke;
background-image: -webkit-gradient(linear,0 0,0 100%,from(white),to(#E6E6E6));
background-image: -webkit-linear-gradient(top,white,#E6E6E6);
background-image: -o-linear-gradient(top,white,#E6E6E6);
background-image: linear-gradient(to bottom,white,#E6E6E6);
background-image: -moz-linear-gradient(top,white,#E6E6E6);
background-repeat: repeat-x;
/* more code...*/
}

如何防止此类错误的发生？谢谢!

Answer 1

您应该使用 background: 而不是 background-image: 因为使用 background-image 您需要设置图像的路径和您没有使用图像……而是使用渐变作为背景。

这是一个您可以使用的工具 http://www.colorzilla.com/gradient-editor/制作渐变并根据需要复制代码，所有这些都是为了使它更容易且无故障。

所有评论后更新:
您可以使用渐变的后备图像。喜欢这里:

/* fallback image */
background-image: url(images/fallback-gradient.png); 

这应该可以解决您的问题。