天天看點

ie8浏覽器下透明度處理

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>
           
ie8浏覽器下透明度處理

背景透明,文字也透明。

<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>
           
ie8浏覽器下透明度處理

繼續閱讀