html - CSS3 过滤器 : image overlapping

Question

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

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 的一种问题。如果是这种情况，请尝试使用完整的 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 属性。