CSS3实例教程(8):CSS3全透明度指南

2020-10-28 01:44 jianzhan

CSS3全透明…不全透明…渐变色…随意你如何叫它吧!这里是1些应用CSS3全透明度的指南和1些事例。
CSS3全透明…不全透明…渐变色…随意你如何叫它吧!这里是1些应用CSS3全透明度的指南和1些事例。
实际上这个firefox很久之前就适用了,而IE1直不适用!
上1篇文章内容:CSS3实例教程(7):CSS3嵌入字体样式
“opacity”申明用来设定1个元素的全透明度:层、文本、照片等…1个opacity的值为1的元素是彻底不全透明的,反之,值为0是彻底全透明的,看看不到的。1到0之间的任何值都表明该元素的全透明水平。
访问器适配性
opacity是访问器适用最好是的1个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:照片)

    大家还可以在照片上应用不一样全透明度的全透明实际效果,就像上面的示例1样。1个很酷的运用是将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 …)
    • Google Chrome(1.0.154 …)
    • Google Chrome(2.0.156 …)
    • Internet Explorer(IE7, IE8 RC1 )
    • Opera(9.6 …)
    • Safari(3.2.1 windows…)