具有渐变的 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 */

但有时我会收到此错误消息:

文件不存在:/var/www/html/site.com/images/texture.png)，线性渐变(顶部，，引用:site.com

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

Answer 1

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

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

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