html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

CSS3中的opacity属性使用教程_Div+Css教程

[ ] 已经帮助:人解决问题

   RGBA和opacityHrEHTML5中文学习网 - HTML5先行者学习网

  语法:HrEHTML5中文学习网 - HTML5先行者学习网

  R:红色值。正整数 | 百分数HrEHTML5中文学习网 - HTML5先行者学习网

  G:绿色值。正整数 | 百分数HrEHTML5中文学习网 - HTML5先行者学习网

  B:蓝色值。正整数| 百分数HrEHTML5中文学习网 - HTML5先行者学习网

  A:透明度。取值0~1之间HrEHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板HrEHTML5中文学习网 - HTML5先行者学习网

  /* IE6 - 8 */HrEHTML5中文学习网 - HTML5先行者学习网

  filter: alpha(opacity=80);HrEHTML5中文学习网 - HTML5先行者学习网

  /* 其他 */HrEHTML5中文学习网 - HTML5先行者学习网

  opacity: 0.8;HrEHTML5中文学习网 - HTML5先行者学习网

2015819172409455.png (311×182)

  RGBA比元素设置CSS的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度。HrEHTML5中文学习网 - HTML5先行者学习网

  opacity的使用HrEHTML5中文学习网 - HTML5先行者学习网

  opacity声明用来设置一个元素的透明度:层、文字、图片等…一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。HrEHTML5中文学习网 - HTML5先行者学习网

  浏览器兼容性HrEHTML5中文学习网 - HTML5先行者学习网

  opacity是浏览器支持最好的一个CSS3元素…当然,除了IE!HrEHTML5中文学习网 - HTML5先行者学习网

  CSS3透明(例1:层)HrEHTML5中文学习网 - HTML5先行者学习网

2015819172429187.jpg (600×100)

  上面的透明例子使用了下面的样式:HrEHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板HrEHTML5中文学习网 - HTML5先行者学习网

  div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; }HrEHTML5中文学习网 - HTML5先行者学习网

  div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; }HrEHTML5中文学习网 - HTML5先行者学习网

  div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; }HrEHTML5中文学习网 - HTML5先行者学习网

  div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; }HrEHTML5中文学习网 - HTML5先行者学习网

  div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }HrEHTML5中文学习网 - HTML5先行者学习网

  浏览器支持:HrEHTML5中文学习网 - HTML5先行者学习网

  Firefox 3.05+HrEHTML5中文学习网 - HTML5先行者学习网

  Google Chrome 1.0+HrEHTML5中文学习网 - HTML5先行者学习网

  Internet Explorer 8-HrEHTML5中文学习网 - HTML5先行者学习网

  Opera 9.6+HrEHTML5中文学习网 - HTML5先行者学习网

  Safari 3.2.1+HrEHTML5中文学习网 - HTML5先行者学习网

  CSS 3 透明(例2:图片)HrEHTML5中文学习网 - HTML5先行者学习网

2015819172448337.jpg (600×180)

  我们也可以在图片上使用不同透明度的透明效果,就像上面的示例一样。一个很酷的应用是将opacity应用到:hover上,实现一种链接的鼠标经过效果。HrEHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板HrEHTML5中文学习网 - HTML5先行者学习网

  img.opacity1 { opacity:0.25; width:150px; height:100px; }HrEHTML5中文学习网 - HTML5先行者学习网

  img.opacity2 { opacity:0.50; width:150px; height:100px; }HrEHTML5中文学习网 - HTML5先行者学习网

  img.opacity3 { opacity:0.75; width:150px; height:100px; }HrEHTML5中文学习网 - HTML5先行者学习网

  浏览器支持:HrEHTML5中文学习网 - HTML5先行者学习网

  Firefox 3.05+HrEHTML5中文学习网 - HTML5先行者学习网

  Google Chrome 1.0.154+HrEHTML5中文学习网 - HTML5先行者学习网

  Internet Explorer IE8-HrEHTML5中文学习网 - HTML5先行者学习网

  Opera 9.6+HrEHTML5中文学习网 - HTML5先行者学习网

  Safari 3.2.1+

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助