您现在的位置:主页 > 网站制作 > CSS+DIV >

如何让IE ff Opera同时支持Alpha透明?-Div+CSS教程

来源:建站吧 责任编辑:Jzq8 发表时间:2011-12-22 点击:
  图片的透明效果是网页中需要用到的一种特殊形式,虽然不是非常的常用,但是遇到这样的需求往往有点措手不及.

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

div css xhtml xml Example Source Code Example Source Code [www.mb5u.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.mb5u.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布局入门教程-页面布局与规划
      • 建站吧:精简高效的CSS命名准则和方法
      • CSS初学者技巧:谈CSS的标准和最佳示例-Div+CSS教程
      • Google谷歌的CSS前景图片合并技术-Div+CSS教程
      • WEB标准网页布局中HTML结构化漫谈-Div+CSS教程
      • CSS网页布局经验:CSS框架思维雏形与CSS文件精简-Div+CSS教程
      • CSSSprites工作原理及其对CSS布局的意义、优点和缺点介绍-Div+CS
      • CSS布局之再谈CSSDiv的居中实现方法-Div+CSS教程

      新闻关注排行榜

      热门推荐 最新推荐
      Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
      Copyright © 2010-2012 JZQ8.COM. 建站吧|建站去吧 版权所有
      冀ICP备09002514号
      冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款