Demo1:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>图片包裹测试A</title> 6 <style type="text/css"> 7 .outerbox { 8 background-color: white; 9 padding: 5px; 10 border: solid 1px grey; 11 display: inline-block; 12 -moz-box-shadow: 2px 2px 5px #333333; 13 -webkit-box-shadow: 2px 2px 5px #333333; 14 box-shadow: 2px 2px 5px #333333; 15 } 16 .insidebox { 17 height: 200px; 18 width: 160px; 19 text-align:center; 20 position:relative; 21 } 22 .man{ 23 position:relative; 24 top:82%; 25 text-align:center; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="outerbox"> 31 <div class="insidebox" style="background-size:100% 100%;background-image:url(images/male.png)"><span class="man">马哈哈</span></div> 32 </div> 33 </body> 34 </html>
Demo2:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片包裹测试B</title> <style type="text/css"> :root{ --w:160px; --h:260px; } .outerbox{ background-color:white; padding:5px; border:solid 1px grey; width:var(--w); height:var( --h); } .outerbox img{ width:var(--w); height:var( --h); } </style> </head> <body> <div class="outerbox"> <img src="images/female.png" style="background-size:100% 100%;background-image:url(images/male.png)" /> </div> </body> </html>
