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

Question

我正在把我的线框放在一起，而且设计也很新设计我很难设计出好的设计。

我有一个我想要使用的背景图片，但是想要通过在图像顶部叠加一个外观来柔化整个效果，类似于非常轻的磨砂玻璃效果。

有人可以建议如何最好地制作磨砂玻璃层或达到类似效果的方法吗？如果我决定在使用磨砂玻璃分层之前将几个其他元素放在背景上，我会分层思考。

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：他们叫我玻璃先生”。

Answer 2

所有磨砂玻璃基本上都是变形，通常也会添加一点光。

对于失真，您可以使用jQuery（如果您可以在每次客户端运行它），就像在this jQuery example中一样（如果您遵循该代码，则需要speed=0没有缩放）。