帶漸變的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文件位於何處，或者它有多少個子文件夾。