Web前端入门到实战：css3解决透明度IE8兼容性问题

本文链接：https://blog.csdn.net/weixin_45921611/article/details/120629144

rgba() 背景透明，内容不透明

- 语法：rgba(r,g,b,a)，
说明：r表示red,g表示green,b表示blue,a表示alpha透明度
- 取值:
r,g,b取值范围 0-255
a透明度，取值0-1
- 使用说明：设置颜色的不透明度，
一般用于调整background-color、color、box-shadow等的不透明度。
- 兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持

opacity 背景和内容一起透明

- 语法：opacity:0.5:
- 取值：0-1，
0表示全透明，1表示全不透明，0-1之间表示半透明
- 使用说明：设置opacity元素的所有后代元素会随着一起具有透明性，
一般用于调整图片或者模块的整体不透明度
- 兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持

ie8-不支持rgba 和opacity属性

解决兼容性问题：
1. 图片
2. ie浏览器透明度滤镜

语法：
filter:Alpha(opacity=n) （A要大写！！！）

n[0--100] 0.3=30 0.5=50
只能实现内容和背景一起透明！！

如果你想实现背景透明内容不透明
(1)把你的内容单独套一个盒子
(2)把内容盒子身上写相对定位给透明度的父盒子写静态定位(阻断透明向下传递！！！)

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .a {
            background-color: firebrick;
            filter:Alpha(opacity=50);
            position: static;
        }
        .a p {
            position: relative;
        }
        </style>
</head>
<body>
    <div class="a">
       <p>文字</p> 
    </div>
</body>
</html>

亲测有效，前提大家要有一个IE8版本的浏览器哦~