CSS教程之CSS3教程(8):CSS3通明度指南

CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
CSS3通明…不通明…突变…任意你怎样叫它吧！这里是一些利用CSS3通明度的指南和一些例子。
实在这个firefox好久之前就撑持了，而IE一向不撑持！
上一篇文章：CSS3教程(7):CSS3嵌进字体
“opacity”声明用来设置一个元素的通明度：层、笔墨、图片等…一个opacity的值为1的元素是完整不通明的，反之，值为0是完整通明的，看不见的。1到0之间的任何值都暗示该元素的通明水平。
扫瞄器兼容性
opacity是扫瞄器撑持最好的一个CSS3元素…固然，除IE！
CSS3通明(例1：层)

登录/注册后可看大图

下面的通明例子利用了上面的款式：

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+…)
  
• GoogleChrome(1.0.154+…)
  
• GoogleChrome(2.0.156+…)
  
• InternetExplorer(IE7,IE8RC1)
  
• Opera(9.6+…)
  
• Safari(3.2.1+windows…)
  

CSS3通明(例2：图片)

登录/注册后可看大图

我们也能够在图片上利用分歧通明度的通明效果，就像下面的示例一样。一个很酷的使用是将opacity使用到:hover上，完成一种链接的鼠标经由效果。

1. 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+…)
  
• GoogleChrome(1.0.154+…)
  
• GoogleChrome(2.0.156+…)
  
• InternetExplorer(IE7,IE8RC1)
  
• Opera(9.6+…)
  
• Safari(3.2.1+windows…)
  

凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和Flash，所以我一直建议一个提交按钮就不要用图片带代替了。