HTML/CSS 如何实现 twitter 的透明玻璃效果?

stephen · 2012年01月30日 · 最后由 AshZ 回复于 2012年06月23日 · 5505 次阅读

就是包括页面内容那个透明框!

在 css 中指定一个带 alpha 值的背景就行了。例如 twitter 官方的是:

background: none repeat scroll 0 0 rgba(221, 238, 246, 0.898);

@xqunix 是否缺少一些代码了,这一句不能实现透明效果哦!

#2 楼 @stephen rgba 并不是所有浏览器都支持的,你可以参照一下:https://developer.mozilla.org/en/CSS/color_value#Browser_Compatibility

另外,刚才又写了一个示例: http://jsfiddle.net/dGLQN/1/

如果上面这个示例你看不到红色和蓝色中间相交的部分的紫色的话,那就是浏览器的支持问题了。

@xqunix 我能看到效果,都用最高版本的浏览器。你发的示例,如果 box1 变成 body ,box2 就是要透明的 div ,也没效果哦!

@xqunix 是否能帮忙发个 twitter 的源代码?85636682#qq.com

那个是图片,不是 css 实现的

css 实现的透明会导致子元素一起变得透明,很麻烦,还有浏览器兼容问题,这个效果实现的成本有些高

@gaicitadie 你说的问题是使用 CSS 的 opacity 属性造成的,使用 @xqunix 提及的 RGBa 属性并不会对子元素造成影响,但 IE8 及以下浏览器不兼容,可以使用 IE 专属的 filter 来解决。 我写了一个兼容 IE 浏览器的 http://jsfiddle.net/R4BQ3/22/ @stephen 可以参考下。

需要 登陆 后方可回复, 如果你还没有账号请 注册新账号