zoukankan html css js c++ java

图片包裹测试

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>