解决IE8下png背景图滤器设置后颜色变深的问题

需求：  一个工资条展示界面，需要加水印

 

实现方法：在工资条的上面浮动一个DIV，设置DIV的背景为png的水印图片，同时设置DIV的透明度为60%

 

源代码：

<div class="salary-data" style="height:300px;">
  <div class="salary-watermark"></div>

    ....

  </div>

</div>

 

div.salary-data {
 position: relative;
 margin-top: 20px;

 min-height: 300px;
}
div.salary-watermark {
 position: absolute;
 top: 0;
 left: 120px;
 width: 474px;
 height: 250px;
 background: url(images/watermark.png) no-repeat center center;
 opacity: 0.6;
 filter: alpha(opacity=60);
 zoom: 1;
}

 

结果：

 

IE9/IE10/IE11下（无论哪种模式）的显示效果（显示正常）

 

IE8下（无论哪种模式）的显示效果（显示不正常，颜色太黑）

 

 解决方法：在浮动的DIV的 filter: alpha(opacity=60);设置后增加一个如下的CSS设置，增加后显示都正常了

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true);

 

修改后的浮动DIV的CSS

div.salary-watermark {
 position: absolute;
 top: 0;
 left: 120px;
 width: 474px;
 height: 250px;
 background: url(images/self/salary/watermark.png) no-repeat center center;
 opacity: 0.6;
 filter: alpha(opacity=60);
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true);
 zoom: 1;
}