HTML+CSS 图片中嵌入文字这种效果如何写?详情看图,在线等,很急
发布网友
发布时间:2022-04-06 12:17
我来回答
共3个回答
热心网友
时间:2022-04-06 13:47
html代码
<div class="pic">
<a href="#"><img src="img.jpg" width="100%" height="100%" /></a>
<p>文字文字文字文字文字</p>
</div>
css样式
<style>
.pic{ position:relative;}
.pic p{ position:absolute; background:#000; bottom:0px; height:20px; width:100%; opacity:0.5; text-align:center; line-height:20px; color:#fff;}
</style>
样式路径宽度高度什么的可以自己改
热心网友
时间:2022-04-06 15:05
<style>
.box{width:400px;height:300px;position:relative;}
.box img{width:400px;height:300px;}
.txt{width:400px;height:50px;line-height:50px;text-align:center;color:#fff;background:rgba(0,0,0,.5);position:absolute;left:0;bottom:0;}
</style>
<div class="box">
<img src="../../111.jpg">
<div class="txt">
社会主义核心价值观
</div>
</div>
望采纳
热心网友
时间:2022-04-06 16:39
极客学院html教程在倒数第二讲有这方面的讲解