css - 带渐变的 CSS3 背景图像纹理不起作用

Question

我设置了它并且它有效。

background: #F5F5F5;
background-image: url('/images/texture.png'); /* fallback */
background-image: url('/images/texture.png'), -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); /* Saf4+, Chrome */
background-image: url('/images/texture.png'), -webkit-linear-gradient(top, #FFF, #FFF); /* Chrome 10+, Saf5.1+ */
background-image: url('/images/texture.png'),    -moz-linear-gradient(top, #FFF, #FFF); /* FF3.6+ */
background-image: url('/images/texture.png'),     -ms-linear-gradient(top, #FFF, #FFF); /* IE10 */
background-image: url('/images/texture.png'),      -o-linear-gradient(top, #FFF, #FFF); /* Opera 11.10+ */
background-image: url('/images/texture.png'),         linear-gradient(top, #FFF, #FFF); /* W3C */

但有时我收到此错误消息：

File does not exist: /var/www/html/site.com/images/texture.png), linear-gradient(top, , referer: site.com

我怎样才能避免这个错误？

Answer 1

您正在使用 CSS 中图像的相对路径（'/images/texture.png'）。如果您在站点中使用子文件夹，这很可能会导致问题，因为图像文件的相对路径在子文件夹中不再有效。

例如，如果您的站点中有一个名为“Accounts”的子文件夹中的页面，则该子文件夹中页面的图像路径将是“/Accounts/images/texture.png”，这显然是不正确，将生成文件不存在错误。

通过使用完整的 URL (http://) 和 (www.site.com/images/texture.png) 作为 CSS 中图像的路径，很容易避免这个问题。这样，您的应用程序总是知道在哪里可以找到图像，无论您的 CSS 文件位于何处或页面深处有多少子文件夹。