background的奇思妙想

示例1：

  .container {
            margin: 200px 200px;
        }
        
        .i {
            width: 20px;
            height: 20px;
            background: url(./background.png) no-repeat;
            background-size: 20px 40px;
            transition: background-position .4s;
        }
        
        .i:hover {
            background-position: 0 -20px;
        }

<div class="container">
        <div class="i"></div>
    </div>

 

示例2：

.container {
            width: 400px;
            height: 300px;
            border: 1px solid red;
            background: url(./panda.jpg);
            /* 图片的长宽比保持不变，让图片完整的显示出来 */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            /* 让图片覆盖容器 */
            /* background-size: cover; */
        }

<div class="container"></div>