background实现图片拉近效果

源码

    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="UTF-8">
      <title>background实现图片拉近效果</title>
      <style>
        #box {
          background: url(1.jpg);
          width: 720px;
          height: 720px;
          margin: 0 auto;
          border: 1px solid #aaa;
          background-color: #444;
        }

        #box:hover {
          background-size: 100.5% 100.5%;
        }
      </style>
    </head>

    <body>
      <div id='box'>

      </div>
    </body>

    </html>