div+css实现图片底部透明遮罩文字标题HTML代码
<a href="#" class="class_outer"> <img src="1.jpg" width="546" height="353" border="0" /> <span class="class_cover">亲,透明遮罩会了吗?</span> </a>
div+css实现图片底部透明遮罩文字标题CSS代码
.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;
}