`

纯Css 背景色透明，内容不透明之方法。

    博客分类：
  • css
css 
阅读更多

纯Css 背景色透明，内容不透明之方法

<!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>
 

分享到：
| jBreadCrumb插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics