效果： ...
<!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>
效果： 
