1、如果我們給父元素添加opacity:0.4后，子元素的red顏色也變成了0.4的透明度，
例子如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度寫法</title> <style type="text/css"> *{ margin:0; padding:0; } .wrap{ margin:200px auto; width:200px; height:200px; background:black; opacity:0.4; position:relative; } .inner{ position:absolute; width:100px; height:100px; background:red; top:50%; left:50%; margin:-50px 0 0 -50px; } </style> </head> <body> <div class="wrap"> <div class="inner"></div> </div> </body> </html>結果： 
**解決方法：
父元素的透明度用rgba的方法
background:rgba(0,0,0,0.4);**
解決的后的代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度寫法</title> <style type="text/css"> *{ margin:0; padding:0; } .wrap{ margin:200px auto; width:200px; height:200px; position:relative; background:rgba(0,0,0,0.4); } .inner{ position:absolute; width:100px; height:100px; background:red; top:50%; left:50%; margin:-50px 0 0 -50px; } </style> </head> <body> <div class="wrap"> <div class="inner"></div> </div> </body> </html>結果： 
解決方案2：有兼容性問題；
利用CSS中的opacity屬性可以實現一些視覺效果，但是父元素設置透明屬性會被子元素繼承，這是不想見到的，於是通過一些設置解決這個問題。
filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;解決辦法是利用CSS3中的rgba（）進行設置，便不會被被子元素繼承，同時為了兼容IE7、IE8等瀏覽器，需要將子元素的positon屬性設置為relative，使其脫離流。
position:relative;