我对这一切都很陌生，所以，请耐心等待。
我正在努力实现类似于折射的图像效果，这是由圆形玻璃引起的。我知道最简单的方法是使用和学习JS，这最终将解决我的所有问题;但是，我一直在努力解决方法，这就是我在这里的原因。
所以，我试图复制的效果是SKY不久前做的事情。 Here is the link.我知道他们将使用画布并从那里控制它。
我的想法是，使用背景图像，然后使用相同背景图像的SVG蒙版，将第二个背景图像向下移动5-10px并将尺寸增加2-3％，然后添加滤镜：模糊（3px的）。我有一个我试图使用的徽标的第二个图像已经有一个＆＃39;玻璃＆＃39;看，它，这解决了反射。
我正在努力的是SVG蒙版。我似乎无法正确显示背景图像，或与徽标对齐。
这是我到目前为止所拥有的。 （请原谅可怜的编码，我还在学习）
非常感谢任何和所有帮助。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;
padding: 0;
background-image:url(http://jforthdesigns.co.uk/images/BG002.jpg);
background-attachment: fixed;
background-position: center;
width:100%;
margin:0;
height: 3000px;
}
.logo {
width:50%;
position:absolute;
top: 350px;
left: 25%;
right:25%;
clear:none;
}
#wrapper {
text-align: center;
width: 100%;
padding-top: 300px;
}
#image {
mask: url(#mask);
-webkit-mask: url(http://jforthdesigns.co.uk/images/mask.svg);
}
.st0 {
fill:#000000;
stroke:none;
}
</style>
</head>
<body>
<div>
<div id="wrapper">
<img src="http://jforthdesigns.co.uk/images/BeamGlass.png" class="logo">
<img id="image" class="logo" src="http://jforthdesigns.co.uk/images/BG002.jpg">
</div>
</div>
<svg width="1024" height="512">
<mask id="mask">
<path class="st0" d="M206.7,153.4c55,55,144.5,55,199.5,0c0.9-0.9,1.8-1.8,2.2-2.3c1.2-1.3,2.4-2.5,3.5-3.9l-18.2-18.2
c-1.3,1.6-2.8,3.1-4.2,4.7c-0.5,0.5-0.9,1-1.4,1.5c-45,45-118.2,45-163.1,0l0,0L206.7,153.4L206.7,153.4z"/>
<path class="st0" d="M231.3,128.8c41.4,41.4,108.8,41.4,150.2,0c2-2,3.9-4,5.6-6.2L369,104.4c-1.7,2.2-3.6,4.2-5.6,6.2
c-31.4,31.4-82.5,31.4-113.9,0l0,0L231.3,128.8L231.3,128.8z"/>
<path class="st0" d="M256.3,103.8c27.6,27.6,72.6,27.6,100.2,0c2-2,3.8-4.1,5.5-6.3l-18.3-18.3c-1.5,2.3-3.4,4.5-5.4,6.5
c-17.6,17.6-46.3,17.6-63.9,0l0,0L256.3,103.8L256.3,103.8z"/>
<path class="st0" d="M122.3,143.3c0,29.7-26.6,46.2-69.6,46.2c-14.2,0-36.1-1.8-36.6-1.8l0-145.9c0.1,0,18.6-4.2,39.3-4.2
c34,0,55.1,11.3,55.1,35.8c0,13.9-6.8,26-19.2,33.8C111,112.2,122.3,123.7,122.3,143.3 M54,171.3c29,0,43.9-9.8,43.9-28.4
c0-18.9-14.3-24.8-39.5-24.8c-6.2,0-12.9,0.4-18.5,0.9v51.5C44.4,171,49.3,171.3,54,171.3 M57.9,55.8c-6,0-12.4,0.8-18.1,1.7v44.8
l9.8,0.2c26.3,0,37.5-10.7,37.5-26.6C87.1,60.9,76,55.8,57.9,55.8"/>
<path class="st0" d="M213.1,39.7c0,0,2,2.7,2,5.1c0,2.1-1.3,8.7-1.8,13.4h-59.5V103h52.3l-1.4,13c-0.3,3.1-2.2,4.9-5.3,4.9h-45.5
v48.3h61.4c0,0,2,2.7,2,5.1c0,2.1-1.3,8.7-1.8,13.4h-80.8c-2.4,0-5.1-2.1-5.1-2.1v-146H213.1z"/>
<path class="st0" d="M584.6,187.7c-7.4,0-16.5,0.7-19.8,0.7c-2.4,0-5.1-2.1-5.1-2.1l-14.7-95.8c-0.6-3.6-0.8-9.6-0.8-15.1
c-0.9,5.2-2.1,10.8-3.4,14.5l-35,97.8c-6.2,0-13.1,0.7-15.7,0.7c-2.4,0-5.1-2.1-5.1-2.1l-34.3-95.7c-1-2.9-1.9-7.4-2.5-11.5
c-0.2,3.9-0.5,8-0.8,10.4l-15.2,98.2c-6.3,0-14.1,0.7-16.9,0.7c-2.4,0-5.1-2.1-5.1-2.1L432.1,48c0.7-4.3-0.5-8.3-0.5-8.3
c7,0,16.7-0.6,19-0.6c2.4,0,5.1,2,5.1,2l38,98.8c1.7,4.2,3,10,4,15.1c1.1-5.3,2.5-11.2,3.8-14.9l34.1-93.6c1.1-3,0.8-6.8,0.8-6.8
c6,0,16.3-0.6,19.5-0.6c2.4,0,5.1,2,5.1,2L584.6,187.7z"/>
<path class="st0" d="M339.1,55.8c0,16.5-13.4,29.9-29.9,29.9s-29.9-13.4-29.9-29.9c0-16.5,13.4-29.9,29.9-29.9
S339.1,39.3,339.1,55.8"/>
</mask>
</svg>
</body>
</html>