今天跟大家分享：div+css实现图片底部透明遮罩文字标题，实现代码非常简单，主要用到了绝对定位于透明背景色，下面给大家范例代码。
<a href="#" class="class_outer"> <img src="1.jpg" width="546" height="353" border="0" /> <span class="class_cover">亲，透明遮罩会了吗？</span> </a>
.class_outer {
display: block;
width: 546px;
height: 276px;
margin: 10px auto;
position: relative;
overflow: hidden;
}
.class_cover {
width: 100%;
height: 50px;
line-height: 50px;
padding-left: 5px;
background-color: rgba(0, 0, 0, .50);
color: #FFFFFF;
font-size: 26px;
position: absolute;
left: 0px;
bottom: 0px;
}扩展阅读：CSS3之颜色值RGBA的详解
在线QQ：
