一 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">


<style type="text/css">
body{
    margin:0;padding:0;
    }
#content,img,.bg,a{
    width: 122px;
    height: 92px;
    text-align: center;
    }
img{position:absolute;z-index:-1;left:0px;}
.bg{transition: all .3s ease-out;}
a{text-decoration:none;   
   display: inline-block;
    color: #fff;
    width: 63px;
    height: 18px;
    font-size: 12px;
    line-height: 16px;
    background-color: red;
    border-radius: 9px;    
}
.bg{background-color:#fff;opacity:0;}
span{color:#fff;line-height: 60px;height: 60px;}
.bg:hover{background-color:black;opacity:0.6;}

</style>
</head>

<div id="content">
<img class="img"src="http://img3.duitang.com/uploads/item/201402/19/20140219214112_VHNVS.jpeg">
<div class="bg">
<div class="coupon">
          
        <span>关注人数 12.1万</span>
        </div>
<div class="enter">
          <a href="#">点击进入</a>
        </div>
</div>
</div>
</body>
</html>

效果：   

posted @ 2016-05-06 14:33  珍惜des  阅读(216)  评论(0)  编辑  收藏  举报