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

-2

我正在做一个任务，我不知道该怎么做。这项任务是我需要使用所创建的图像并将其制作成一个图块。我们还没有学会如何使用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>

如果有人能帮助我想出解决办法，希望有一种解释，那将不胜感激。

来源

2016-12-16 Carlos Meowski Martinez

如果搜索堆栈溢出以进行CSS图像重复，您应该能够找到回答。 :-)像这样的FYI问题可能会被拒绝投票并搁置。 – Nolo

[提示]（http://www.w3schools.com/cssref/pr_background-repeat.asp） –

你的html或css中没有图像。 – mlegg

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

但是，如果你想使用一个图像，并有它的瓷砖，使用CSS背景属性，并将其设置为重复。您还可以让图像仅在x或y轴上重复，这样会只给出水平重复，或者只给出垂直重复。你可以在W3school上看到很多例子。

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

使用上面的html，我会分配背景图像和背景重复的正文元素css以在您的站点上进行平铺。

来源

2016-12-16 00:52:42 Lavert

也许你正在寻找背景图像

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>

来源

2016-12-16 00:54:00 Rahul

-1

<!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来创建平铺的马赛克效果 - 复制并粘贴上面的完整代码以使其正常工作

来源

2016-12-16 01:46:07

真的吗？你更专注于语法，一个可行的解决方案 –

谢谢你这样做，而不是期待别人来清理它！ – Elin

当然可以;下次我会记住这一点 –

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

回答

相关问题