<!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>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #HTML #CSS #图片整下方显示一行文字 #ampltDOCTYPE
