案例4-拼图-循环套循环-注意“声明”“加等”“背景定位”

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>擦出图片</title>

    <style>

        body{

            margin: 0;

            background-color: rgb(211, 241, 213);

        }

        .wrap{

            position: relative;

            width: 590px;

            margin: 100px auto;

        }

        .wrap div{

            width: 50px;

            height: 50px;

            position: absolute;

            background: url(./img.jpg);

            background-color: rgb(98, 133, 95);

            background-size: 1000% 1000%;

        }

        .wrap div:nth-of-type(1){

            background-position: 0px 0px;

        }

    </style>

</head>

<body>

<div class="wrap">

</div>

<script>

  var wrap = document.querySelector(".wrap");

  var inner = "";

  var w = 50;

  var h = 50;

  for(var i = 0; i < 10; i++){

      for(var j = 0; j < 10; j++){

        inner += '<div style="left:'+(j*w)+'px;top:'+(i*h)+'px; background-position: -'+(j*w)+'px -'+(i*h)+'px"></div>';

      }

  }

  wrap.innerHTML = inner;

</script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容