如何制作具有玻璃和半透明效果的div？

Question

我想给div一个玻璃反射外观以及半透明效果.如何将这两种效果结合起来,使div看起来像一个玻璃透明的小工具？有没有办法做到这一点？

div的bgcolor是lightskyblue,还没有设置背景图像.

Answer 1

您可以在背景颜色中提供alpha透明度.

例如

div { 
    background: rgba(255,255,255,0.5); /* white color with 50% transparency */
}

在IE但是,rgba不起作用.你需要使用过滤器.

例如

div {
    background: transparent;
    -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr=#77ffffff, endColorstr=#77ffffff)"; /* For IE8 */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#77ffffff, endColorstr=#77ffffff); /* < IE 7 */
    zoom: 1;
}

开始和结束颜色中的颜色模式不同于RGBA用户ARGB格式和全部十六进制中的颜色模式.与上面的示例类似,以下是值的分布方式

77: alpha (fully transparent: 00, fully opaque: FF) 
ff: Red
ff: Green
ff: Blue

这个方法会在你的师上放置一个透明的背景,但是如果你想让整个div都是透明的,包括里面的所有东西,你可以使用opacity属性

例如

div {
    background: #fff;
    opacity: 0.5; /* This is not support in IE though, use filter if needed in IE *
}

演示