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文件位于何处，或者页面深处有多少个子文件夹，您的应用程序始终都能确切地知道在哪里找到图像。

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

1 个答案: