html css 图片整下方显示一行文字

2022年6月21日 169次阅读 来源: jialan75 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> #parent{  width: 300px; height: 300px; /* border: solid 10px orangered; */ margin: 0 auto; position: relative; } #parent>#child{  width: 100px; height: 100px; background-color: blue; position:absolute; left: 8px; top:0; } #parent>#child2{  width: 100px; height: 100px; background-color: red; position:absolute; top: 0; right: 0; } #parent>#child3{  width: 100%; height: 30px; background-color: rgba(0,0,255,0.5); position:absolute; left: 0; bottom:0; text-align: center; } img{  width: 100%; height: 100%; } p{  margin: 0; color: #fff; font-size: 20px; } </style>
</head>
<body>

    <div id="parent">
        <img src="img/mv.png" alt="">
        <!-- <div id="child"> </div>-->
        <!-- <div id="child2"> </div> -->
        <div id="child3">
            <p>这是一个头像</p>
        </div>
    </div>

</body>
</html>

《html css 图片整下方显示一行文字》

    原文作者：jialan75
    原文地址: https://blog.csdn.net/jialan75/article/details/122748589
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞