[英]CSS3 filter: image overlapping
我的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">
感谢帮助!
没有完整的代码,很难确定,但是看起来这可能只是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属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.