3

我正在把我的线框放在一起，并且作为新的设计也很难得到一个好的设计。

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

谁能建议如何最好地创建一个磨砂玻璃层或达到类似效果的方法？我在考虑分层，以防我决定在背景上放置几个其他元素，然后再用磨砂玻璃分层。

4

2 回答 2

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：他们叫我格拉斯先生》。

于 2012-06-21T14:25:37.297 回答
1

所有的磨砂玻璃本质上都是失真的，通常还会添加一点光。

对于失真，您可以使用 jQuery（如果您每次都可以在客户端运行它），就像在这个 jQuery 示例中一样（如果您遵循该代码，您将希望拥有speed=0并且没有缩放）。

于 2012-06-21T04:48:36.000 回答