现在很多网站的产品展示，标题都是出现在产品图片底部半透明显示，其实这种半透明标题实现起来非常的简单，几句CSS代码即可实现。下面看编程之家给大家做个范例。
纯CSS实现图片底部半透明标题效果
CSS代码部分
.img-demo{ position: relative; display: block; height:260px; width:390px; margin: 0 auto; }
.img-demo span{ background:#333; -moz-opacity:.50; filter:alpha(opacity=70); opacity:.70; color: #fff; position: absolute;
bottom: 0; left: 0; width:390px; padding: 10px 0; border-top: 1px solid #999; }
HTML代码部分
<div class="img-demo"><img src="images/1.jpg" width="390" height="260" alt="花" /><span>这是素描的花</span></div></div>
看了上面的介绍是不是非常简单哦，2句CSS，1行div就OK了。大家自己试试吧。
原文：https://www.cnblogs.com/wenruo/p/9732704.html 先上...