最近自己用 css 来实现一个图片遮罩层的效果，看着不错，给大家分享下。关于遮罩层，可以用 JavaScript 实现，也可以用 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"> 开始游戏 </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、素材在下面链接：
百度网盘下载 ? ? ?密码：16am
==========================
web 前端中文站点评：
在学习 web 前端，偶尔做一些小效果 demo，特别是对于初学者来说，这些小的web 前端 demo 效果，能让大家加深对 html，css 和 JavaScript 的理解，从而巩固了相关的学习，也能达到立竿见影的学习体验。
很好