网站建设 郑州网站建设 网站制作 网页设计 网站设计 郑州建网站 - 爱易在线

网站地图 | 网站Tags标签 | RSS订阅 | 加入收藏
您的位置:网站首页 > 博客笔记 > 技术交流 > 正文 技术交流相关信息

css图片叠加实现图片鼠标滑过变90%黑色透明效果

作者:郑州网站建设 2012/9/18 12:23:52 点击: 来源:

作用:鼠标滑过图片,把图片用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>

 

 

 

Tag:css
分享到:

上一篇:JQuery菜单鼠标滑过中文变成英文

下一篇:SDCMS1.3.1后台编辑器插入代码二次编辑出错问题

技术交流推荐阅读

用户评论

最新博文

热门排行

推荐信息

关于爱之易| 付款方式| 联系我们| 网站地图| 网站Tags标签 | RSS订阅