css中的Aero效果

Question

如何使用css获得航空玻璃盒子的效果。我的用户可以动态地将背景图像设置为他感兴趣的任何内容。所以我想要一个动态的玻璃盒子，而不是那些根据特定背景而开发的盒子……

准确地说..我想要实现此链接中显示的内容。在标题下:他们叫我Mr.Glass：http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/#glassbox

但这必须是动态的，应该适用于任何背景。此外，我还想深入了解我们如何了解那些适合我们目的的颜色值，并创建这样的效果，即使它是特定于背景的。这只是经验，还是工具？请解释一下……我非常喜欢css技术，而不是上面的…

Answer 1

好吧，我真的不明白你的问题是什么，因为你给出的例子在动态设置背景的情况下似乎工作得很好，看看这个例子：

http://jsfiddle.net/GGhKg/1603/

相关代码：

   background: rgba(0,0,0,0.25);
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);

只需点击链接查看我正在谈论的内容。

这就是你的意思吗？

祝好运!

Answer 2

方法是:将glassBox css代码转换为一个类。不使用div{}，而是使用css {}，并将其放在背景图片上，为此，您需要从您希望用户更改的背景div中复制.glass属性。