CSS3过滤器：图像重叠

Question

我的CSS代码有点问题。当我在CSS样式表中使用filter:gray;时，我的黑白图片是重叠菜单。当图片没有滤镜效果时，菜单表现正常。

CSS：

img.images {
  filter: gray; 
  -webkit-filter: grayscale(100%); 
}

MENU的CSS：

#navigationMenu{
    margin: 0 auto;
    float: left;
    width:175px;
    height:680px;
    list-style:none;
    border-right: 1px dotted #ffff66;

}


#navigationMenu li{
    margin: 0 auto;
    list-style:none;
    height:95px;
    padding:4px;
    width:95px;
}

#navigationMenu span{
    width:0;
    left: 95px;
    padding:0;
    position:absolute;
    overflow:hidden;
    border-radius: 7px;
    margin-top:12px;

    white-space:nowrap;
    line-height:70px;
}

#navigationMenu a{
    height:95px;
    width:95px;
    display:block;
    position:relative;
}

菜单的HTML：

<ul id="navigationMenu">
    <li>
        <a class="home" href="#">
            <span>Home</span></a>       
    </li>

    <li>
        <a class="about" href="#">
            <span>Virtual Tuning</span></a>         
    </li>

    <li>
         <a class="services" href="#">
            <span>Drawings</span></a>
    </li>
</ul>

HTML：

<img class="images" src="images/virtual/seat.jpg">

感谢您的帮助！

Answer 1

没有完整的代码，很难确定，但看起来这可能是IE唯一的问题。如果是这种情况，请尝试使用完整的progid代替gray，如下所示：

img.images {
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
  -webkit-filter: grayscale(100%); 
}

另一个想法是在过滤后使用z-index css属性。