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>

     相关图片下载

  • 相关阅读:
    贝叶斯分类
    K-Means算法
    python数组
    深度学习与神经网络
    数据挖掘算法之-关联规则挖掘(Association Rule)
    k8s记录-pip源配置
    k8s记录-yum本地仓库部署
    k8s记录-不同集群服务互联
    k8s记录-kube-dns(core-dns)配置(七)
    k8s记录-kubectl常用
  • 原文地址:https://www.cnblogs.com/exesoft/p/10682516.html
Copyright © 2011-2022 走看看