html图片半透明代码,纯CSS实现图片底部半透明标题

现在很多网站的产品展示，标题都是出现在产品图片底部半透明显示，其实这种半透明标题实现起来非常的简单，几句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代码部分

这是素描的花