在网页背景上创建图像叠加的磨砂玻璃效果

Question

我正在制作线框图，但由于对设计不太熟悉，所以很难实现漂亮的设计。我有一张想要使用的背景图片，但想通过在图片上添加一个类似于非常轻微的磨砂玻璃效果的外观来软化整个效果。请问是否有人能够建议如何最好地创建磨砂玻璃层或实现类似的效果？我考虑采用分层方式，以防在添加磨砂玻璃之前在背景上放置其他几个元素。

- sayth

Answer 1

首先，我会在那张图片的顶部放置一个 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;
}

最简单和最有效的方法可能是使用GIMP或Photoshop创建半透明的PNG图像，模仿磨砂玻璃，并将其设置为.top-layer的背景。

如果您不想使用其他图像，而是想要纯CSS解决方案，则应尝试使用.top-layer样式属性进行实验。尝试使用线性和径向渐变的多个背景（白色、浅蓝色和透明度的混合），不透明度和多个盒子阴影。 这些设计应该会有所帮助：

http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/

特别是“某个手机主屏幕”和“盒子3：他们叫我玻璃先生”。

- szym

Answer 2

所有的磨砂玻璃本质上都是扭曲的，通常还会添加一些光线。

对于扭曲效果，您可以使用jQuery（如果您每次都愿意在客户端运行它），例如this jQuery example（如果您遵循该代码，您将需要设置speed=0并且不进行缩放）。

- Etheryte

---

我想的是，如果我有一个背景和一个UI，我想将效果叠加在其上，以创建柔化且轻微失真的效果。 - sayth