利用CSS背景顔色屬性使父級div背景透明同時避免子級标簽透明。

實作背景色透明效果的代碼

• 實作各個浏覽器中具備良好的透明特性的效果，IE中使用私有濾鏡filter，高端浏覽器使用CSS3中的rgba屬性。
• 輸入十六進制的顔色值以及透明度，自動在IE的過渡濾鏡以及CSS3中的rgba屬性之間進行十六進制與十進制的換算。
• 增加對IE9浏覽器中的濾鏡取消效果
• ★ 鑒于需要做浏覽器的hack，使用了:root來讓IE9以前的浏覽器不支援效果，是以增加了一個需要添加選擇符類名的方式，對于這塊需要大家在後期添加樣式到代碼中做單獨的處理
• 把CSS代碼中的background修改為background-color，隻針對背景顔色來操作。

案例：如下

 <div class="modal-backdrop "><span>資料送出中....</span></div>   

 外面的div設定了為透明  如何避免裡面的span不透明呢 

通常情況下，我們可能會設定外面的div為opacity，這樣會導緻span也會透明。

解決方案：

.outer {
  width: 100px;
  height: 100px;
  background-color: rgba(0,0,0,.6);
}

.inner {
  width: 50px;
  height: 50px;
  background-color: rgba(255,255,255,1);
}      

通過rgba 來設定 父級div 背景有顔色為透明即可。

其中a代表的就是alpha

弊端：

rgba裡面a是代表alpha，就直接設定顔色的透明，但是這個僅限于用在單色上，如果div裡是圖檔就會有問題了~