半透明div并且在IE火狐下兼容
2016-03-10 19:27
369 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0 auto;}
body{ background:url(sl.jpg) no-repeat; }
.div{background:rgba(0, 0, 0, 0.4) none repeat scroll 0 0 !important;/*实现FF背景透明,文字不透明*/filter:Alpha(opacity=40); background:#000000;/*实现IE背景透明*/color:#FFF;width:500px;height:470px;border:1px
solid #FF0;font-size:18px;text-align:center;font-weight:bold;margin:30px;}
.div p{position:relative;}
</style>
</head>
<body>
<div class="div"><p >我是文字</p></div>
</body>
</html>
IE:外层filter,内层position:relative或absolute。
FF:外层不使用opacity,而用background:rgba()。
<!--
-->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0 auto;}
body{ background:url(sl.jpg) no-repeat; }
.div{background:rgba(0, 0, 0, 0.4) none repeat scroll 0 0 !important;/*实现FF背景透明,文字不透明*/filter:Alpha(opacity=40); background:#000000;/*实现IE背景透明*/color:#FFF;width:500px;height:470px;border:1px
solid #FF0;font-size:18px;text-align:center;font-weight:bold;margin:30px;}
.div p{position:relative;}
</style>
</head>
<body>
<div class="div"><p >我是文字</p></div>
</body>
</html>
IE:外层filter,内层position:relative或absolute。
FF:外层不使用opacity,而用background:rgba()。
<!--
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style> #wrapper { background: #369; width:300px; height:150px; } #div1 { -moz-opacity: 0.3; /* FF 3.5以下 */ opacity: 0.3; /* FF 3.5及以上 */ filter: alpha(opacity=30); /* IE6及以上 */ background: #fff; width: 200px; height: 50px; } #div2 { background: rgba(255, 255, 255, 0.3) !important; /* IE无效,FF有效 */ background: #fff; filter: alpha(opacity=30); width: 200px; height: 50px; } #div2 span { position: relative; } </style> </head> <body> <div id="wrapper"> <div id="div1"> <span>图层背景半透明,字体颜色也半透明</span> </div> <br /> <div id="div2"> <span>图层背景半透明,字体颜色不半透明</span> </div> </div> </body> </html>
-->
.con{ background:rgba(255, 255, 255, 0.8) none repeat scroll 0 0 !important;/*实现FF背景透明,文字不透明*/ filter:Alpha(opacity=80); background:#fff;/*实现IE背景透明*/ } .con p{ position:relative;}/*实现IE文字不透明*/ <div class="con"> <p>文字</p> </div>
相关文章推荐
- memset函数与二维数组初始化的问题
- Java多线程
- YTU C语言习题 整数排序
- uiautomator日志文件转换为xml格式文件
- IDL format codes
- java 实现文件复制demo
- Linux Shell 编程学习总结
- 字符串包含 位运算法
- 理解互斥量和信号量
- 导入百度导航SDK遇到的相关问题
- scatter file介绍
- Cocoapods
- 架构师的行为准则(四)
- 我是一只IT小小鸟读后感
- 页面展示方法和装置
- init&initWithFrame&initWithCoder
- docker学习笔记15:Dockerfile 指令 USER介绍
- Recover the Smallest Number (30)
- javascript时间戳转换为date类型
- Thread 产生死锁案例