Css 为Web背景上的图像叠加创建磨砂玻璃效果

我把我的线框放在一起，也是新的设计，我很难得到一个好的设计发生

我有一个我想使用的背景图像，但我想通过在图像顶部分层来软化整个效果，类似于非常轻的磨砂玻璃效果

---

有谁能建议如何最好地创建一个磨砂玻璃层或如何实现类似的效果？我在考虑分层，以防在使用磨砂玻璃分层之前，我决定在背景上添加其他几个元素。

所有磨砂玻璃本质上都是变形的，通常也会添加一些光线

---

对于失真，您可以使用jQuery（如果您同意它每次都在客户端运行），如中（如果您遵循该代码，您将希望速度为0且不进行缩放）。

首先，我会在该图像上方放置一个div。这可以通过这样做来实现

<div class="box">
<img src="yourimage.jpg" />
<div class="top-layer"></div>
</div> 



.box{
  position: relative;
}
.top-layer{
  position: absolute;
  top: 0; left: 0;
}

.盒子{
位置：相对位置；
}
.顶层{
位置：绝对位置；
顶部：0；左侧：0；
}

最简单、最有效的方法可能是使用gimp或photoshop创建半透明png仿磨砂玻璃，并将其设置为.top层的背景

如果您不想使用另一个图像，并且想要纯css解决方案，那么您应该尝试使用.top-layer样式属性。尝试使用线性和径向渐变（白色、浅蓝色和透明度的混合）、不透明度和多框阴影的多个背景。 这些设计应该会有所帮助：

---

特别是“某个手机主屏幕”和“第三框：他们叫我格拉斯先生”。

我想我的想法是，如果我有背景和用户界面，我想在顶部分层效果，以创建一个柔和且轻微扭曲的效果。