JQuery+CSS实现图片上放置按钮的方法

"data-url='"+freeOne+"'> "+
"<span class='contactus' style='font-size:26px;'>试 看</span> <span class='glyphicon glyphicon-play' style='font-size:20px;top:0;bottom:2px;'></span> </a>"
);
}

页面：

<style>
.freePreviewPicture{
 top:94px;
 left:150px;
 position:absolute;
 z-index:100;
 width: 180px;
 height: 60px;
 border: 2px solid white;
 display: block;
 color: white;text-decoration: none;
 letter-spacing: 1px;font-size: 16px;
 line-height: 20px;
 text-align:center;padding-top:18px;
 background-color: rgba(0, 0, 0, 0.44);
 -webkit-backface-visibility: hidden;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 border-radius: 10px;
}
</style>
<div class="es-row-wrap container-gap course-cover">
 <div class="row row-5-7 course-cover-heading">
 <div id="coursePicture" class="col-sm-5 picture hidden-xs" style="position: relative;">
 <#if course.coverImage?has_content>
  <img src="${course.coverImage}" class="img-responsive" width="436px" height="245px" />
 <#else>
  <img src="/resources/assets/img/default/course-large.png" class="img-responsive" />
 </#if>
 </div>
 </div>
</div> 

运行效果图如下：

希望本文所述对大家的jQuery程序设计有所帮助。