|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
CSS3通明…不通明…突变…任意你怎样叫它吧!这里是一些利用CSS3通明度的指南和一些例子。
实在这个firefox好久之前就撑持了,而IE一向不撑持!
上一篇文章:CSS3教程(7):CSS3嵌进字体
“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+…)
- GoogleChrome(1.0.154+…)
- GoogleChrome(2.0.156+…)
- InternetExplorer(IE7,IE8RC1)
- Opera(9.6+…)
- Safari(3.2.1+windows…)
CSS3通明(例2:图片)
我们也能够在图片上利用分歧通明度的通明效果,就像下面的示例一样。一个很酷的使用是将opacity使用到:hover上,完成一种链接的鼠标经由效果。- 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,所以我一直建议一个提交按钮就不要用图片带代替了。 |
|