魔哥--Css:背景色透明,内容不透明之终极方法!兼容(不支持ie6)。
2010-10-21 09:23
489 查看
<!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>
body {background:url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png) 0 0 repeat;}
* {margin:0;padding:0;}
.Boxer {width:600px;height:400px;overflow:hidden;margin:0 auto;border:6px solid red;}
.Opacity {
height:400px;
background-color:rgba(0,0,0,0.5); /*标准浏览器 只需这句*/
background-color:#000\9; /*IE 系列*/
filter:alpha(opacity=50); /*IE 系列*/
/*
作为透明背景的层,不可以有 position 属性,不知为何。。。
。
background-color:rgba(0,0,0,0.5) 这句,IE6貌似能读懂一小部分,我艹了。所以只能将background-color:#000 写在其后,然后加个IE的专有Hack。
不信可以写一个试试看
background-color:#000;background-color:rgba(0,0,0,0.5);filter:alpha(opacity=50);
IE6会让你蛋疼的!
*/
}
.BoxerInner {position:relative; /*IE 系列*/
text-align:center;font-size:24px;font-weight:700;color:yellow;}
</style>
</head>
<body>
<p style="font-size:60px;color:#000;text-align:center;padding:20px;font-weight:700;">Css:背景色透明,内容不透明之终极方法!兼容,终极。</p>
<div class="Boxer">
<div class="Opacity">
<div class="BoxerInner">BoxerInner</div>
</div>
</div>
</body>
</html>
运行代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小魔出品</title>
<style>
body {background:url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png) 0 0 repeat;}
* {margin:0;padding:0;}
.Boxer {width:600px;height:400px;overflow:hidden;margin:0 auto;border:6px solid red;}
.Opacity {
height:400px;
background-color:rgba(0,0,0,0.5); /*标准浏览器 只需这句*/
background-color:#000\9; /*IE 系列*/
filter:alpha(opacity=50); /*IE 系列*/
/*
作为透明背景的层,不可以有 position 属性,不知为何。。。
。
background-color:rgba(0,0,0,0.5) 这句,IE6貌似能读懂一小部分,我艹了。所以只能将background-color:#000 写在其后,然后加个IE的专有Hack。
不信可以写一个试试看
background-color:#000;background-color:rgba(0,0,0,0.5);filter:alpha(opacity=50);
IE6会让你蛋疼的!
*/
}
.BoxerInner {position:relative; /*IE 系列*/
text-align:center;font-size:24px;font-weight:700;color:yellow;}
</style>
</head>
<body>
<p style="font-size:60px;color:#000;text-align:center;padding:20px;font-weight:700;">Css:背景色透明,内容不透明之终极方法!兼容,终极。</p>
<div class="Boxer">
<div class="Opacity">
<div class="BoxerInner">BoxerInner</div>
</div>
</div>
</body>
</html>
运行代码
相关文章推荐
- Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
- Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
- css背景色透明 内容不透明的解决方法(兼容所有浏览器)
- css实现纯文字内容元素透明背景(兼容IE6)
- IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题
- [CSS] - 让IE6支持PNG-24透明背景(多个方法)
- IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题
- div+css 如何让背景层半透明 内容不透明 并且能兼容ie6,ie7,ie8,ff
- div+css 如何让背景层半透明 内容不透明 并且能兼容ie6,ie7,ie8,ff 【转】
- IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题
- 【技术】ie6,ie7,ie8 css bug汇总以及兼容解决方法
- CSS兼容IE6、IE7、IE8和Firefox浏览器的方法
- 兼容IE6和Firefox的PNG背景透明CSS代码
- div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- IE、Firefox、Opera和Safari对CSS样式important和*和_的支持 兼容CSS的解决方法及CSS差别
- [小技巧]兼容IE6的纯CSS背景半透明文字不透明
- Css:实现背景色透明/半透明而内容不透明
- ie6,ie7,ie8 css bug汇总以及兼容解决方法
- css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法