Question

我正在尝试在我的网站上为徽标创建一个磨砂玻璃效果。标志正在移动与parralax效果在div与背景图像和模糊背景。所以我决定使用一个焦点图像和一个将通过.svg蒙版显示的模糊图像。

我在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;
}

SVG

<?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

跨浏览器磨砂玻璃效果与CSS

1 个答案: