现在很多网站的产品展示,标题都是出现在产品图片底部半透明显示,其实这种半透明标题实现起来非常的简单,几句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; }
<div class="img-demo"><img src="images/1.jpg" width="390" height="260" alt="花" /><span>这是素描的花</span></div></div>
看了上面的介绍是不是非常简单哦,2句CSS,1行div就OK了。大家自己试试吧。