CSS 透明度设置方法及常见问题解析.pdfVIP

CSS 透明度设置⽅法及常见问题解析 看完w3cschool 《css 教程》中的 《css 图像透明/不透明》，你对 CSS 中的半透明颜⾊ 可能已经有了基础的了解，CSS透明算得上 ⼀种相当流⾏的技术，但在跨浏览器⽀ 持上，对于开发者来说，可以说 ⼀件令⼈头疼的事情。⽬前还没有⼀个通⽤⽅法， 以确保透明度设置可以在⽬前使⽤的所有浏览器上有效，但 总得来说它 ⼀个巨⼤ 的变⾰。关于CSS 透明度，有⼀点需要注意的 ，它虽然使⽤了很多年，但它⼀直以 来都不 ⼀个标准属性，它 ⼀种⾮标准技术，应该 CSS3规范的⼀部分。 怎样在CSS样式中设置背景的透明度 怎样在CSS样式中设置背景的透明度,下⾯给出⼀个具体的实例。把类为box的层设为 透明。 div class=box/div style .box{width:300px; height:200px; ma gin:0 auto; boxde :1px solid /style 其中background:#000; filter:alpha(opacit :30); opacit :0 .3;为关键代码，当opacit 值为1 时，表⽰完全不透明，为0 时表⽰完全透明。 其他的属性介绍如下: opacit : 0 .3 ；这 “最重要的” ，因为它 在CSS的现⾏标准。这将在Firefox ，Safari和 Opera的⼤多数版本的⼯作。这将 你所需要的⼀切如果所有的浏览器都⽀持⽬前的 标准。当然 他们不会错。 filter:alpha(opacit =30);这⼀个 针对IE浏览器 -moz-opacit :0 .3;你需要这⼀个⽀持⽼版本的Mozilla浏览器如Netscape Navigator 。 -khtml-opacit : 0 .3;这 旧版本的Safari （1.× ）当渲染引擎 使⽤仍被称为kthml ，⽽不 ⽬前的WebKit 。 CSS中⽤j avascript j query实现透明度的改变 如何⽤CSS实现背景半透明效果？我们⼀般的做法 ⽤两个层，⼀个⽤于放⽂字，另 ⼀个⽤于做透明背景，因为透明滤镜的效果会影响到⾥⾯的内容。 不过如果你只需求在IE下实现，使⽤CSS实现透明度有很多⽅案，这⾥只 介绍⼤家 通⽤的⽅法： 1. .t anspa ent_class { 2. filte :alpha(opacity=50);//标准的css透明度，在⼤部分的标准浏 3. opacity :0.5;//兼容IE解决⽅案 4 . -moz-opacity :0.5;//⽼的Mozilla b owse s如NetscapeNavigat 5. -khtml-opacity :0.5;//兼容⽼的Safa i (1.x) 版本,很少可以不⽤ 6. } 知道了CSS改变透明度的原理，那么使⽤j avascript动态改变透明度就简单了： 1. html 2. head 3. title/title 4 . metahttp-equiv=Content-Typecontent=text/html;cha 5. style 6. div{width:100px;height:100px;backg ound-colo : ed 7. /style 8. sc ipt 9. window .onload =function(){ 10. va myDiv = document.getElementById(t anspa e 11. myDiv .onclick =function(){ 12. myDiv .style.opacity =.4;//针对所有通⽤浏览 13. myDiv .style.filte =alpha(opacity=40); 14 . } 15. } 16. /sc ipt 17. /head 18. body 19. divid=t anspa ent_divthis