学学习网 手机版

学学习网

学习路径: 学习首页 > web开发 > CSS3 >

第八章 CSS3透明度指南 

设置字体:
----------------------------------
CSS3透明,不透明,渐变,随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。其实这个firefox很久以前就支持了,而IE一直不支持! “opacity”声明用来设置一个元素的透明度:层、文字、图片等,一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。

浏览器兼容性
opacity是浏览器支持最好的一个CSS3元素„当然,除了IE!

CSS3透明(例1:层)
div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; } 
div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; } 
div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; } 
div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; } 
div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; } 

浏览器支持:  
  Firefox(3.05+)
  Google Chrome(1.0.154+)  
  Google Chrome(2.0.156+)  
  Internet Explorer(IE7, IE8 RC1 )  
  Opera(9.6+)
  Safari(3.2.1+ windows„)

CSS 3 透明(例2:图片)
img.opacity1 { opacity:0.25; width:150px; height:100px; } 
img.opacity2 { opacity:0.50; width:150px; height:100px; } 
img.opacity3 { opacity:0.75; width:150px; height:100px; } 

浏览器支持:  
  Firefox(3.05+)
  Google Chrome(1.0.154+)  
  Google Chrome(2.0.156+) 
  Internet Explorer(IE7, IE8 RC1 ) 
  Opera(9.6+)
  Safari(3.2.1+ windows)
----------------------------------
课程列表
重点难点
赞助链接