html - CSS3 过滤器：图像重叠

Question

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

CSS：

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

菜单的 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 的问题。如果是这种情况，请尝试使用 completeprogid而不是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 属性。