作用:鼠标滑过图片,把图片用90%透明度的黑色图片遮罩显示,实现鼠标滑过,图片变黑特效(非滤镜黑灰效果)
用到的遮罩90%透明图片:
效果预览:
css图片叠加实现图片鼠标滑过变90%黑色透明效果
主要css代码:
.pro li a: hover .dj { width: 221px; height: 126px; position: absolute; cursor: pointer; background: url(/UpFile/201209/probg.png) no-repeat center top; _filter: progid: dximagetransform.microsoft.alphaimageloader(enabled=true, sizingmethod=scale, src="/UpFile/201209/probg.png"); _background: none; }
主要html代码:
<div class="pro"> <ul> <li><a href="#" title="图-03"><div class="dj"></div><img src="/UpFile/201209/2012091063289421.jpg" alt="图-03"/>图-03</a></li> <li><a href="#" title="图-08"><div class="dj"></div><img src="/UpFile/201208/2012083049982409.jpg" alt="图-08"/>图-08</a></li> </ul> </div>