魔哥--Css:背景色透明,内容不透明之终极方法!兼容(不支持ie6)。

简介:
 
<!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>





本文转自豪情博客园博客,原文链接:http://www.cnblogs.com/jikey/archive/2010/10/21/1857217.html,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
2月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
3月前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
42 1
|
4月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
30 2
|
4月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
28 3
|
3月前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
37 0
|
3月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
4月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
29 1
在masm32中获取IE版本的方法2
在masm32中获取IE版本的方法2
在masm32中获取并显示IE版本的方法1
在masm32中获取并显示IE版本的方法1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等