关键词：css 图片底部 文字 半透明
现在的用户对网站都很挑剔所以网站越来越美观也做的越来越精致，往往网站的好看都是注重在细节上的修改，现在制作一个图片底部文字显示在半透明背景效果上，直接贴出代码：
[code]<ul class=”pic”>
<li><a href=”#”><img src=”images/pic1.png” width=”170″ height=”129″ /><span>文字文字文字文字</span></a></li>
<li><a href=”#”><img src=”images/pic1.png” width=”170″ height=”129″ /><span>文字文字文字文字</span></a></li>
<li><a href=”#”><img src=”images/pic1.png” width=”170″ height=”129″ /><span>文字文字文字文字</span></a></li>
<li><a href=”#”><img src=”images/pic1.png” width=”170″ height=”129″ /><span>文字文字文字文字</span></a></li>
</ul>[/code]
[code]ul.pic li{
width:170px;
height:129px;
float:left;
border:#f0f6f6 4px solid;
margin-left:5px;
margin-top:9px;
}
ul.pic li a{position:absolute;display:block;border:1px solid #555555;}
ul.pic li a:hover{border:1px solid #FFFFFF;}
ul.pic li span{width:170px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=50);-moz-opacity:0.6;opacity:0.6;font:bold 12px/30px Verdana, Arial; text-align:center;cursor:hand;}
ul.pic li a:hover span{text-decoration:underline}[/code]
