【发布时间】：2023-04-01 05:56:01
【问题描述】：
我正在尝试为我的网站上的徽标创建磨砂玻璃效果。徽标在具有背景图像的 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>
【问题讨论】：
-
最简单也是迄今为止最受支持的方法是使用 Photoshop 之类的东西来create a PNG 使用所需的形状。虽然这种类型的事情可能在未来的浏览器中是可能的，但现在跨浏览器不会很容易发生
-
掩码和主html文档必须具有相同的域，这就是jsfiddle当前不起作用的原因。
-
谢谢，罗伯特！我将 svg 和 html 放在同一个域上，并且掩码已开始在 Firefox 中工作，但我有 no luck 试图更改其大小或位置。
-
SVG 掩码元素具有 x 和 y 属性。尝试修改这些。
-
我试过
<mask x="0.03" y="0.12" id="mymask">之类的东西，但它只是crop掩码，没有移动它。