如何实现文字加透明背景显示在一张图片的底部的效果, 先说思路: 把图片用做背景,然后写一个position:absolute;的div浮动于它的上面,这个层设定一个半透明opacity:0.7;
如何实现文字加透明背景显示在一张图片的底部的效果
html代码: "fl d1">
艾薇儿 "fl d2">
戴普
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;}
|