在图片上加上文章标题的方法,如果网站发布文章,不想手动去配图的话,可以使用以下方法去添加图片,图片上加上文章标题。此方法并非真正的把标题PS到图片上,页是利用CSS加一个浮动层到图片 ,
如果想把标题自动PS到图片上,可以使用另一款插件:DedeCMS插入带标题图片插件 http://www.aizici.com/ziyuan/7.html
下面是DIV部分,把标题替换成相应的标签。
<div class="detail-pic-show">
<img src="1.jpg" alt="标题" title="标题">
<div class="contxt">
<div class="txtdis">
<span class="ect-clamp">标题-标题-标题</span>
</div>
</div>
下面是CSS部份,
<style>
.detail-pic-show { position: relative; margin-left: auto; margin-right: auto; margin-bottom: 20px; width: 480px; }
.detail-pic-show img { display: block; width: 100%; }
.detail-pic-show .contxtbox { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.detail-pic-show .contxt { position: absolute; top: 50%; left: 50%; margin: -86px 0 0 -200px; width: 400px; height: 172px; background: url('bg_imgbg.png') no-repeat; color: #fff; text-align: center; }
.detail-pic-show .contxt .txtdis { position: absolute; top: 48px; left: 20px; right: 20px; font-size: 20px; line-height: 60px; height: 60px; }
.detail-pic-show .contxt .txtdis .txtvm { display: inline-block; vertical-align: middle; margin-top: -3px; line-height: 30px; }
.detail-pic-show .contxt .txtask { position: absolute; left: 50%; bottom: 12px; margin-left: -72px; width: 144px; height: 40px; line-height: 40px; border-radius: 20px; background-color: #1AC095; font-size: 16px; display: none; }
.detail-pic-show:hover .contxt .txtask { display: block; }
</style>