html - 跨浏览器的毛玻璃效果与css

Question

我正在尝试为我网站上的 Logo 创建磨砂玻璃效果。 Logo 在具有背景图像和模糊背景的 div 上以视差效果移动。所以我决定使用一张焦点图像和一张模糊图像，它们将通过 .svg 蒙版显示。

frosted glass effect

我在 JSFiddle 上创建了演示完美运行，但仅适用于 webkit 浏览器。

是否有机会用 Firefox 或 IE 重现这种效果？谢谢!

更新

如果我将 html 和 svg 放在同一个域掩码在 Ferefox 中工作，但如何更改掩码的大小和位置？

html

<div class="intro">
    <div class="logo"></div>
</div>
<div class="stuff">Other stuff</div>

CSS

html,body{
  height: 100%;
  margin:0;
  padding: 0;
}
.intro {
  height: 100%;
  position: relative;
  background: url(http://i.imgur.com/KsfKCre.jpg) center no-repeat;
  /* Image Credit: Unsplash.me */
  background-size: cover;
}
.logo {
  position: relative;
  height: 100%;
  background: url(http://i.imgur.com/x4DIKBs.jpg) center no-repeat;
  background-size: cover;
  -webkit-mask-image: url(../img/radio-checked.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position-x: 50%;
  -webkit-mask-position-y: 50%;
  -webkit-mask-size: 350px;

  mask: url(../img/radio-checked.svg#mymask);
  mask-repeat: no-repeat;

  /*seems doesn't work in Firefox*/
  mask-position-x: 50%;
  mask-position-y: 50%;
  mask-size: 350px;
}
.stuff{
  height: 100%;
  text-align: center;
  padding: 10em 0;
  position: relative;
}

图形

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
<mask id="mymask">
<path d="M100 0c-55.229 0-100 44.771-100 100s44.771 100 100 100 100-44.771 100-100-44.771-100-100-100zM100 175c-41.421 0-75-33.579-75-75s33.579-75 75-75c41.421 0 75 33.579 75 75s-33.579 75-75 75zM62.5 100c0-20.711 16.789-37.5 37.5-37.5s37.5 16.789 37.5 37.5c0 20.711-16.789 37.5-37.5 37.5s-37.5-16.789-37.5-37.5z" fill="#ffffff"></path>
</mask>
<path d="M100 0c-55.229 0-100 44.771-100 100s44.771 100 100 100 100-44.771 100-100-44.771-100-100-100zM100 175c-41.421 0-75-33.579-75-75s33.579-75 75-75c41.421 0 75 33.579 75 75s-33.579 75-75 75zM62.5 100c0-20.711 16.789-37.5 37.5-37.5s37.5 16.789 37.5 37.5c0 20.711-16.789 37.5-37.5 37.5s-37.5-16.789-37.5-37.5z" fill="#000000"></path>
</svg>

Answer 1

根据 caniuse 的说法，如果你想让它在 FF 中工作，你需要内联你的蒙版 SVG。试试看。

http://caniuse.com/css-masks