效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>banner底部添加半透明标题</title>
<style>
* {
margin: 0;
padding: 0;
}
.out-content {
width: 100%;
height: 400px;
margin: 0px auto;
}
.in-content {
width: 100%;
height: 380px;
position: relative;
}
.c-images {
width: 100%;
height: 100%;
}
.c-title {
color: azure;
width: 100%;
text-indent: 20px; /*首行缩进20个像素*/
height: 50px;
line-height: 50px;
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, .5); /*透明效果*/
}
</style>
</head>
<body>
<div class="out-content">
<div class="in-content">
<!--此处banner图片替换为所需图片即可-->
<img class="c-images" src="img/road.jpg">
<p class="c-title">世界上最好的语言</p>
</div>
</div>
</body>
扫一扫
1939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
