ie8下透明度處理
css3新增屬性rgba和opacity:(0~1); 在ie8下無法使用
Alpha(opacity=[0~100]);//[0~100] 0是透明 100是不透明， IE下的透明度屬性，子元素會繼承這個透明度，下面有阻斷子元素繼承方法，
解決方法:
背景透明，文字不透明，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <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> </head> <body> <h1>背景透明 文字不透明</h1> <div class="a r"> //內容需要套盒子 <p>HHHH</p> </div> </body> </html>
背景透明，文字也透明，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .a{ width: 200px; height: 200px; font-size: 20px; line-height: 200px; text-align: center; } .l{
background-color: indigo;
//設定透明度， filter: Alpha(opacity=30); } </style> </head> <body> <h1>背景透明 文字透明</h1> <div class="a l">HHHH</div> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/24962.html
標籤：Html/Css
上一篇：技術小白，請教下大家！