如何制作具有玻璃和半透明效果的div？ [英] How to make a div with glassy and semi transparent effect?

问题描述

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

I want to give a div a glassy reflection appearance as well as a semi transparent effect. How can I combine these two effects so that the div will look like a glassy transparent gadget? Is there a way to do this?

div的bgcolor是lightskyblue，还没有设置背景图片。

The div's bgcolor is lightskyblue and no background image is set yet.

推荐答案

你可以用背景颜色给出alpha透明度。

You can give alpha tranparency in your background color.

例如

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

在IE中然而， rgba 不起作用。你需要使用过滤器。

In IE However, rgba does not works. You need to use filter.

例如

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 格式和全部以十六进制表示。与上面的示例类似，以下是值的分布方式

The color patter in both the start and end color is different than the way in RGBA, it user ARGB Format and all in Hex. Like in above example, following are how the values are distributed

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

这个方法会在你的师上放置一个透明的背景，但是如果你想让整个div都是透明的，包括里面的一切，那么你可以使用 opacity property

This method will place a transparent background on your division, but if you want the entire div to be tranparent including everything inside, then you can use opacity property

例如

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

演示

这篇关于如何制作具有玻璃和半透明效果的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！