Question

我正在完成一项任务，但我无法弄明白该怎么做。分配是我需要使用创建的图像并使其成为一个图块。我们还没有学会如何使用JavaScript，所以我的搜索结果是空的。这是我必须使用的HTML + CSS代码：

＆＃13;

body {
  width: 800px;
  background-color: black
}
.outer1 {
  height: 100px;
  width: 100px;
  border: 2px solid yellow;
  background-color: lightgreen
}
.outer2 {
  height: 100px;
  width: 100px;
  border: 2px solid yellow;
  background-color: lightgreen
}
.inner1 {
  height: 100px;
  width: 100px;
  border: 2px solid yellow;
  border-radius: 50px 10px;
  background-color: green
}
.inner2 {
  height: 100px;
  width: 100px;
  border: 2px solid yellow;
  border-radius: 10px 50px;
  background-color: green
}
div {
  float: left
}

＆＃13;

<body>
  <div class="outer1">
    <div class="inner1"></div>
  </div>
  <div class="outer2">
    <div class="inner2"></div>
  </div>
</body>

＆＃13;

如果有人能帮助我解决这个问题，希望有一个解释，那将非常感激。

Answer 1

我是幻觉，但我没有在你的标记或CSS中看到图像？

但是，如果您想使用图像并将其设置为tile，请使用css background属性并将其设置为重复。您还可以告诉图像仅在x或y轴上重复，这将仅为水平重复，或仅为垂直重复。你可以在W3schools上看到很多例子。

例如，如果你有一个div想要给出一个背景图像并重复它，通常这将是一个像砖墙一样的图像设计和裁剪重复而不显示接缝一个平铺图像开始，一个结束。

使用上面的html，我会将背景图像和背景重复的body元素css指定为在您的网站上平铺它。

Answer 2

也许你正在寻找背景图片

＆＃13;

div {
    background-image: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a");
    background-repeat: repeat;
  width: 100%;
  height: 500px;
  border: 1px solid red;
}

＆＃13;

<div>
</div>

＆＃13;

Answer 3

<!Doctype HTML>
<html>
<body>
<div id="container">
    <div id="canvas">
        <script>
            for(x=0; x<=48;x++) {
                function create(htmlStr) {
                    var frag = document.createDocumentFragment(),
                    temp = document.createElement('div');
                    temp.innerHTML = htmlStr;
                    while (temp.firstChild) {
                        frag.appendChild(temp.firstChild);
                    }
                    return frag;
                }
                var canvas = document.getElementById('canvas')
                var div_create = ""
                if (x % 2 === 0) {
                    div_create = "<div class='outer1', id="+x+"><div class='inner1'></div></div>"
                 }
                else {
                    div_create = "<div class='outer1', id="+x+"><div class='inner2'></div></div>"
                }
                divider = create(div_create)
                canvas.appendChild(divider)
            }
        </script>
    </div>
</div>
</body>

<style>
    body{
    background-color:black;
    width: 800px;
    }

    .outer1{
        height: 100px; 
        width: 100px;border: 2px solid yellow;
        background-color: lightgreen 
    }

    .inner1{
        height: 100px; 
        width: 100px; 
        border: 2px solid yellow; 
        border-radius : 50px 10px; 
        background-color:green
    }

    .inner2{
        height: 100px; 
        width: 100px; 
        border: 2px solid yellow; 
    border-radius : 10px 50px;
    background-color:green
    }
</style>
</html>

在这里，您需要做的就是在for循环中更改x以获得所需的正方形数量。这种方法的工作方式是通过JavaScript循环创建div来创建平铺马赛克效果 - 复制并粘贴上面的完整代码以使其工作

如何在不使用JavaScript的情况下重复图像？

3 个答案: