怎麽實現背景透明而文字不被透明
阿新 • • 發佈：2017-10-15
strong ros margin bsp radi type 語句 align posit
前言：
我們知道使用opacity可以實現透明效果，兼容語句是：filter:alpha(opacity=0~100);但是它具有父子繼承特性，怎麽實現我們想要的效果呢？
方法一：運用CSS3的屬性rgba(R,G,B,A),IE8以上的版本可以達到我們的要求：
R：紅色值。正整數 | 百分數
G：綠色值。正整數 | 百分數
B：藍色值。正整數 | 百分數
A：Alpha透明度。取值0~1之間。
那麽IE8及以下怎麽辦呢？再加一句：
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
#7F000000的前兩位數字控制透明度，取值16進制從00 -> FF（越小越透明），00表示完全透明，FF就是全不透明，後面六位是色值。
方法二：用opacity，但是讓文字與div之間不再是父子關系，通過定位或margin值來實現我們想要的效果，這方法可以實現當我們不是純色背景（圖片）圖片透明
的需求。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} .box{position:relative;margin:0 auto;width:300px;} .box1{ width:300px; height:200px; background: green; opacity:.5; } p{ width:300px; text-align:center; color:red; font:bold 20px/20px "微軟雅黑"; position:absolute;top:50%;} </style> </head> <body> <div class="box"> <div class="box1"></div> <p>字體不被透明</p> </div> </body> </html>
這是之前遇到的坑，希望對你有所幫助，有問題大家可以一起討論...........
怎麽實現背景透明而文字不被透明