相容ie7、8、9、10、FF、Chrome的遮罩顯示

經常碰到這種情形，要實現圖片上有一層遮罩和按鈕，滑鼠滑過時遮罩顏色變深且按鈕圖片變化，磕磕碰碰終於弄出來題目所述兼容的解決方案。

對於遮罩的實現，將遮罩層、按鈕、圖片放置在同一個div中，根據absolute的位置跟隨特性，將遮罩層和按鈕放在圖片的前面，position都設為absolute不佔據任何空間。設定遮罩層的顏色和透明度，由於顏色和透明度會設定到整個遮罩層及其子元素的透明度，如果將按鈕圖片放在遮罩層內，按鈕圖片也會有透明度，達不到您想要的視覺效果，所以將遮罩層和按鈕圖示設定為平級。

     

然而，在IE7、8中，background-color中rgba並不能表現出遮罩層的效果，所以要將紅框內顏色及透明度的寫法換一種：

 ，背景設定為黑色，opacity設定透明度，filter是IE濾鏡（為使IE相容顯示透明度）

 這樣就實現了題目提到的各個瀏覽器的一致的視覺效果：