CSS3过滤器在localhost上工作但不在远程主机上工作

时间:2014-10-16 18:56:04

标签: html css css3 firefox svg

我目前正面临一个我不知道如何解决的问题。将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

在localhost上更正输出: correct output 远程主机(实时站点)上的输出不正确: incorrect output

这两个截图都是使用相同的浏览器(Ubuntu 14.04上的Firefox 33.0)制作的。在Ubuntu 14.04上使用Chrome(版本38.0.2125.104(64位))时一切正常,所以我的猜测是问题源于url(grayscale.svg#greyscale) hack。

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

1 个答案:

答案 0 :(得分:4)

每当人们有一个“从本地主机工作而不是从远程服务器工作”的SVG文件问题时,几乎总是证明你的网络服务器没有为你的SVG文件返回正确的MIME类型。

确保Web服务器返回的内容类型为“image / svg + xml”的grayscale.svg文件。最简单的检查方法是使用浏览器开发工具中的“网络”选项卡。

<强>更新

在查看您的实际网站后,我在控制台中发现了此警告:

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”。