如何实现文字加透明背景显示在一张图片的底部的效果,

先说思路：

把图片用做背景，然后写一个position:absolute;的div浮动于它的上面，这个层设定一个半透明opacity:0.7;

   

html代码：

<div class="fl d1">  <img id="" class="img" alt="xxx" width="150" height="200" src="Avial.jpg"/>  
<div class="d"><span>艾薇儿</span></div> </div> <div class="fl d2">  
<img id="" class="img" alt="xxx" width="150" height="200" src="JonnyDeep.jpg"/>  
<div class="d"><span>戴普</span></div>
</div>

css代码：

.fl {float: left;}.d1,.d2 {position: relative;}
//1.设为relative使子标签的移动(需设置position属性)以此div作为参照位置
.d1 {width: 200px;}.d { width: 150px; height:30px; line-height:30px; position: absolute;
//2.设为absolute，就可以将父标签左上角作为参照点来移动位置了
bottom: 0px;
//3.有了以上设置就可以将class为d的div置于父标签的底部了
text-align: center; background:rgba(0,0,0,0.2);
//设置透明背景 color:#fff; font-size: 13px;}