在本地主机但在远程主机上工作的CSS3过滤器

Question

我目前正面临一个问题，我不知道如何解决。虽然对某些图像应用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> 

相关目录结构： 远程主机上不正确的输出（现场：

/ 
    css 
    grayscale.svg 
    style.css 
    page.html 

在本地主机上正确的输出网站）：

两个屏幕截图都是使用相同的浏览器（Ubuntu 14.04上的Firefox 33.0）制作的。在Ubuntu 14.04上使用Chrome（版本38.0.2125.104（64位））时一切正常，所以我猜测问题来自url(grayscale.svg#greyscale)黑客。

关于如何解决这个问题的任何想法？我正在使用的SVG文件从this site下载。

Answer 1

每当人们对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”。