CSS实现图片遮罩效果 百度爱玩效果

最近自己用css来实现一个图片遮罩层的效果,看着不错,给大家分享下。关于遮罩层,可以用JavaScript实现,也可以用css来实现,主要还是看应用场景吧。具体效果如下:

CSS遮罩层

CSS遮罩层

 

CSS遮罩层效果展示

CSS遮罩层效果展示

下面贴下html的主要代码,css代码太长,大家可以下载下来实践下。

 <a href="#" class="mp-game-link" target="_blank">
 <div class="mp-game-content">
 <div class="mp-game-show">
 <img width="166" height="140" src="images/3.jpg">
 <div class="mp-game-cover-platform">
 <div class="mp-game-cover-name">魅影传说</div>
 <div class="mp-game-cover-description">跨越时空征战,掀起万人PK狂潮!</div>
 <div class="mp-game-cover-start">
 <span class="start-btn">&nbsp;开始游戏&nbsp;</span>
 <span class="mp-more">更多平台</span>
 </div>
 <div class="mp-overlay"></div>
 </div>
 </div>
 <div class="mp-game-info">
 <div title="魅影传说" class="mp-game-info-name">魅影传说</div>
 <div class="mp-game-info-detail">
 <span class="mp-game-info-type">角色扮演</span>
 <span class="mp-game-info-op">51.com</span>
 </div>
 <div class="mp-game-score-ct">
 <div class="mp-game-score-ct-inner">
 <span class="mp-game-score-i">9</span>
 <span class="mp-game-score-d">.8</span>
 </div>
 </div>
 </div>
 </div>
 </a>

在线演示
具体遮罩层效果的js代码,html和css代码demo、素材在下面链接:
抱歉,只有对本文发表过评论才能阅读隐藏内容。

==========================

web前端中文站点评:

在学习web前端,偶尔做一些小效果demo,特别是对于初学者来说,这些小的web前端demo效果,能让大家加深对html,css和JavaScript的理解,从而巩固了相关的学习,也能达到立竿见影的学习体验。

 

3
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到

(5)条精彩评论:
  1. 11
    good 想学
    112018-09-17 16:50 (4天前)回复
    • web前端中文站
      好东西可以收藏下
      web前端中文站2018-09-19 10:31 (2天前)回复
  2. 11
    挖到
    112018-09-17 16:49 (4天前)回复
  3. <a href='https://www.lisa33xiaoq.net/1190.html' rel='external nofollow' class='url'>123</a>
    :eek: 很好
    1232018-08-14 14:12 回复
  4. yzf
    点赞 :eek:
    yzf2018-07-25 21:28 回复