在本地主機但在遠程主機上工作的CSS3過濾器

我目前正面臨一個問題，我不知道如何解決。雖然對某些圖像應用CSS3灰度過濾器，但它適用於我的本地主機，但在活動網站上，圖像出現白色（即不可見）。在本地主機但在遠程主機上工作的CSS3過濾器

相關CSS：

.preview .preview-thumb { 
    width: 200px; 
    height: 150px; 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: url(grayscale.svg#greyscale); 
    filter: gray; 
} 

.preview:hover .preview-thumb { 
    -webkit-box-shadow: 0 0 3px 3px gray; 
    -moz-box-shadow: 0 0 3px 3px gray; 
    box-shadow: 0 0 3px 3px gray; 
    -webkit-filter: none; 
    -moz-filter: none; 
    -ms-filter: none; 
    -o-filter: none; 
    filter: none; 
}

相關HTML：

<div class="preview-container" data-category-id="3"> 
    <div class="preview"> 
    <a href="project.php?id=3"> 
     <img class="preview-thumb" src="projects/architectuur/Masterproject Wilsele/grote maquette.jpg"/> 
    </a> 
    <span class="preview-name">Masterproject Wilsele</span> 
    </div> 
</div>

相關目錄結構： correct output 遠程主機上不正確的輸出（現場：

/ 
    css 
    grayscale.svg 
    style.css 
    page.html

在本地主機上正確的輸出網站）： incorrect output

兩個屏幕截圖都是使用相同的瀏覽器（Ubuntu 14.04上的Firefox 33.0）製作的。在Ubuntu 14.04上使用Chrome（版本38.0.2125.104（64位））時一切正常，所以我猜測問題來自url(grayscale.svg#greyscale)黑客。

關於如何解決這個問題的任何想法？我正在使用的SVG文件從this site下載。

來源

2014-10-16 Tom Knapen

把html。您可能遇到網址參考問題。我的意思是服務器上的URL可能指向錯誤的位置 – 2014-10-16 18:58:42

關閉投票人：請留下一些（建設性）關於如何改進我的問題的評論 – 2014-10-16 19:11:05

@RobertLongson我的html沒有基礎標記。相關頁面是http://corporaal.be/projects.php。 – 2014-10-16 19:22:57

每當人們對SVG文件有「從本地主機但不是遠程服務器」的問題時，幾乎總是會發現您的Web服務器沒有爲您的SVG文件返回正確的MIME類型。

確保Web服務器正在返回帶有內容類型「image/svg + xml」的grayscale.svg文件。最簡單的檢查方法是使用瀏覽器開發工具中的「Net」選項卡。

更新

看實際的網站後，我發現在控制檯這樣的警告：

Content Security Policy: The page's settings blocked the loading of a resource at 
      http://corporaal.be/css/grayscale.svg ("default-src 'none'").

您需要修改的內容安全策略頭以允許加載SVG。嘗試將default-src更改爲「self」。

來源

2014-10-17 02:15:24

我通過評論中的鏈接檢查過，在這種情況下這不是問題。 – 2014-10-17 04:14:11

謝謝羅伯特。我沒有注意到這個鏈接。我研究出了問題所在。這是CSP規則。答案已更新。 – 2014-10-17 07:26:42

謝謝，我以爲我已經在Firefox中檢查了響應頭，但在控制檯中沒有看到任何「內容被阻止」警告。無論如何，這固定它。 – 2014-10-17 08:11:18

在本地主機但在遠程主機上工作的CSS3過濾器

回答

相關問題