兼容ie6的背景透明文字不透明

最新推荐文章于 2022-06-13 11:38:04 发布

Bling_Bling_

最新推荐文章于 2022-06-13 11:38:04 发布

阅读量386

点赞数

分类专栏： ie6兼容性问题

本文链接：https://blog.csdn.net/bling_bling_/article/details/51752422

版权

ie6兼容性问题专栏收录该内容

11 篇文章 0 订阅

订阅专栏

背景透明，文字不透明，还要兼容所有浏览器，包括ie6，以下方法就可以实：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景透明，文字不透明</title>
        <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
        padding: 50px;
        background: red;
        }
        .demo{
        padding: 25px;
        background-color: rgba(0,0,0,0.3);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
        }
        .demo p{
        color: #FFFFFF;
        }
        @media \0screen\,screen\9 {/* 只支持IE6、7、8 */
        .demo{
            background-color:#000000;
            filter:Alpha(opacity=30);
            position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
            *zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
        }
        .demo p{
            position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
        }
        }
        </style>
    </head>
    <body>
        <div class="demo">
            <p>背景透明，文字不透明</p>
        </div>
    </html>

Bling_Bling_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容ie6的背景透明文字不透明

背景透明，文字不透明，还要兼容所有浏览器，包括ie6，以下方法就可以实：背景透明，文字不透明 *{ padding: 0; margin: 0; } body{ padding: 50px; backg
复制链接

扫一扫