设置背景透明文字内容不透明方法

设置背景透明文字内容不透明方法

效果图如下:
所有浏览器的呈现

<!--  
设置背景透明文字内容不透明方法
兼容ie全家族

Copyright 2017-9-25, Jachin
QQ: 381558301 
Email: 381558301@qq.com 

关键点
    position:relative 设置子元素为相对定位,可让子元素不继承Alpha值
    filter:Alpha(opacity=50); 只支持IE6、7、8、9 
 -->
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="utf-8">
    <title>设置背景透明文字内容不透明方法</title>
    <style type="text/css">
        .container{ 
            height: 200px;
            width: 400px;
            padding-left: 20px;
            background: #ff9900;
            overflow: hidden;
        }
        .box{ 
            height: 50px;
            width:200px;
            background: rgba(0,0,0,0.3);
            line-height: 50px;
            margin-top: 50px;
        }
        .box p{ 
            color: #ffffff;
        }

        @media \0screen\,screen\9 {/* 只支持IE6、7、8 也就是只有这几个内核可识别\0screen\,screen\9这串东西*/
            .box{
            background-color:#000000;
            filter:Alpha(opacity=50);
            position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
            *zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
            }
            .box p{
            position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */
            }  
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <p>My name is Jachin.</p>
        </div>
    </div>
</body>
</html>

参考内容:http://www.cnblogs.com/PeunZhang/p/4089894.html

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值