CSS如何设置div背景透明度且兼容性良好_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:36:47
原创
1788 人浏览过

CSS如何设置div背景透明度且兼容性良好:

建议:尽可能的手写代码,可以有效的提高学习效率和深度。

设置对象的透明度在很多网页特效中都有实用,设置对象的透明度并不难,唯一的难点可能就是如何兼容各大主流浏览器,下面就简单介绍一下如何实现此效果。代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title> <style type="text/css"> *{   margin:0px;   padding:0px; } .opacity{   width:150px;   height:150px;   background-color:green;   filter:alpha(opacity=50);   -moz-opacity:0.5;   opacity:0.5;   margin-left:20px;   margin-top:20px; } span{   display:block;   width:80px;   height:80px; } </style> </head> <body>   <div class="opacity">      <span>蚂蚁部落</span>    </div> </body> </html>
登录后复制

上面的代码实现了各个浏览器的兼容。起透明效果的代码如下:

filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;
登录后复制

第一行代码仅能在IE浏览器中有效。
第二行代码支持老版本的FF浏览器,其实去掉也可以,因为老版本的浏览器使用率很少了。
第三行能够支持各大浏览器,但是IE6-IE8浏览器不支持。
特别说明:
虽然实现了背景透明,但div中的文字也呈现为透明状态,这往往不是想要的,可以参阅如何设置div的透明度但是其中的文字不透明一章节解决此问题。

原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=4680

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!