如何在不使用JavaScript的情况下重复图片？
问题描述：
我正在做一个任务，我不知道该怎么做。这项任务是我需要使用所创建的图像并将其制作成一个图块。我们还没有学会如何使用JavaScript，因此我的搜索空着。下面是HTML + CSS代码，我有工作：如何在不使用JavaScript的情况下重复图片？
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
}<body>
<div class="outer1">
<div class="inner1"></div>
</div>
<div class="outer2">
<div class="inner2"></div>
</div>
</body>如果有人能帮助我想出解决办法，希望有一种解释，那将不胜感激。
答
我是幻觉，但我没有看到您的标记或CSS中的图像？
但是，如果你想使用一个图像，并有它的瓷砖，使用CSS背景属性，并将其设置为重复。您还可以让图像仅在x或y轴上重复，这样会只给出水平重复，或者只给出垂直重复。你可以在W3school上看到很多例子。
例如，如果你有一个div，你想给一个背景图像并重复它，通常这将是一个类似砖墙的图像，它被设计和裁剪以重复显示而不显示接缝一个平铺图像开始，一个结束。
使用上面的html，我会分配背景图像和背景重复的正文元素css以在您的站点上进行平铺。
答
也许你正在寻找背景图像
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;
}<div>
</div>
答
<!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>
这里这部作品所有你需要做的就是在改变X for循环平方需要的金额。这种方式的工作原理是通过JavaScript循环创建div来创建平铺的马赛克效果 - 复制并粘贴上面的完整代码以使其正常工作
如果搜索堆栈溢出以进行CSS图像重复，您应该能够找到回答。 :-)像这样的FYI问题可能会被拒绝投票并搁置。 – Nolo
[提示]（http://www.w3schools.com/cssref/pr_background-repeat.asp） –
你的html或css中没有图像。 – mlegg