ie8浏览器下透明度处理

简介: css3新增属性rgba和opacity:(0~1); 在ie8下无法使用、Alpha(opacity=[0~100]);//[0~100] 0是透明 100是不透明。 IE下的透明度属性,子元素会继承这个透明度。下面有阻断子元素继承方法。

css3新增属性rgba和opacity:(0~1); 在ie8下无法使用

Alpha(opacity=[0~100]);//[0~100] 0是透明 100是不透明。 IE下的透明度属性,子元素会继承这个透明度。下面有阻断子元素继承方法。

解决方法:
背景透明,文字不透明。

    <style>
        .a{  
            width: 200px;
            height: 200px;
            font-size: 20px;
            line-height: 200px;
            text-align: center;
        }

        .r{
        //设置透明度父元素定位
            position: static;
        //设置背景颜色
            background-color: indigo;
        //设置父元素透明度属性
            filter: Alpha(opacity=30);
        }

        .r p{
        
 //设置内容盒子定位,阻断透明度传播
            position: relative;
        }

    </style>
<body>
        <h1>背景透明 文字不透明</h1>
        <div class="a r">
        //内容需要套盒子
            <p>HHHH</p>            
        </div>
</body>

a.png

背景透明,文字也透明。

    <style>
        .a{
            width: 200px;
            height: 200px;
            font-size: 20px;
            line-height: 200px;
            text-align: center;
        }
        .l{
     
            background-color: indigo;

        //设置透明度,
            filter: Alpha(opacity=30);
        }

    </style>
<body>
        <h1>背景透明 文字透明</h1>
        <div class="a l">HHHH</div>
</body>

b.png

相关文章
|
Web App开发 前端开发 JavaScript
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
1月前
|
JavaScript 前端开发
|
5月前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
55 0
|
3月前
|
JavaScript
VUE——如何兼容IE9|IE10|IE11浏览器
VUE——如何兼容IE9|IE10|IE11浏览器
134 0
VUE——如何兼容IE9|IE10|IE11浏览器
|
4月前
|
安全 网络安全
用IE浏览器访问网站提示证书错误
当你在Internet Explorer中遇到证书错误提示,通常是因网站SSL/TLS证书问题或浏览器安全设置需调整。解决方法包括: 检查时间设置 调整IE设置 安装证书 调整计算机时间
111 3
|
5月前
win10取消ie浏览器自动跳转edge浏览器
win10取消ie浏览器自动跳转edge浏览器
179 4
|
6月前
|
存储 机器人
在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
【2月更文挑战第28天】在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
131 1
|
Web App开发 XML 编解码
IE浏览器下载文件中文文件名乱码问题解决
IE浏览器下载文件中文文件名乱码问题解决
136 0
|
前端开发
border-radius 兼容 IE8浏览器
border-radius 兼容 IE8浏览器
88 1