论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

如何让IE ff Opera同时支持Alpha透明?

文章类别:div+css布局 | 发表日期:2008-9-26 11:14:18

  图片的透明效果是网页中需要用到的一种非凡形式,虽然不是非常的常用,但是碰到这样的需求往往有点措手不及.

  关于CSS Alpha透明的相关知识。先请看如下代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
filter:alpha(opacity=50);       /* IE */
-moz-opacity:0.5;              /* Moz + FF */
opacity: 0.5;           /* 支持CSS3的浏览器(FF 1.5也支持)*/

  简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比)。

  从上面的代码中你没有看到Opera。没错,Opera还未支持标准的opacity,也没有其私有的可支持Alpha透明的属性。
  但是,我们知道,Opera是支持Alpha透明的PNG图片的(当然Moz Family也支持)。所以我们可以使用背景图片来实现Alpha透明效果。

  要害在于: 

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
background:transparent url(alpha80.png) left top repeat!important;
background:#ccc;
filter:alpha(opacity=50);

  既然Moz Family支持Alpha透明的PNG,所以我们没有必要使用其私有属性了。当然,你可以使用标准的opacity,但别同时使用Alpha透明图片和opacity,这样的话就成了两者的混合了。你可以把上面的例子下载过来,然后/*opacity:.5;*/的注释看看。
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058