原创力文档- 1、本文档共7页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
CSS 透明度设置方法及常见问题解析
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-Type"content="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>
文档评论（0）