带渐变的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/images/texture.png” ，这显然是不正确的，并会生成一个文件不存在的错误。

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