0

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">

手伝ってくれてありがとう！

4

1 に答える 1

1

完全なコードがないため、確実に判断するのは困難ですが、これは IE のみの問題のようです。その場合は、次のように、progid代わりにcomplete を使用してみてください。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 プロパティで遊ぶことです。

于 2013-09-25T19:10:06.577 に答える