【发布时间】：2014-10-17 15:25:26
【问题描述】：
我目前面临一个我不知道如何解决的问题。在对某些图像应用 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) hack。
关于如何解决这个问题的任何想法？我使用的 SVG 文件是从 this site 下载的。
【问题讨论】：
-
把html.您可能遇到 URL 引用问题。我的意思是服务器上的 URL 可能指向错误的位置
-
@RobertLongson 我的 html 中没有基本标记。相关页面为corporaal.be/projects.php。
-
你解决了什么问题吗？我在 Mac 上的 Chrome v38 上看起来不错。