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

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

html css

Html 如何在不使用JavaScript的情况下重复图像？,html,css,Html,Css,我正在做一项作业，不知道该做什么。任务是，我需要使用创建的图像，并使其成为平铺。我们还没有学会如何使用JavaScript，所以我的搜索结果是空的。以下是我必须使用的HTML+CSS代码：正文{ 宽度：800px；背景颜色：黑色 } .outer1{ 高度：100px；宽度：100px；边框：2倍纯黄色；背景颜色：浅绿色 } .outer2{ 高度：100px；宽度：100px；边框：2倍纯黄色；背景颜色：浅绿色 } .1{ 高度：100px；宽度：100px；边框：2倍纯

我正在做一项作业，不知道该做什么。任务是，我需要使用创建的图像，并使其成为平铺。我们还没有学会如何使用JavaScript，所以我的搜索结果是空的。以下是我必须使用的HTML+CSS代码：

正文{
宽度：800px；
背景颜色：黑色
}
.outer1{
高度：100px；
宽度：100px；
边框：2倍纯黄色；
背景颜色：浅绿色
}
.outer2{
高度：100px；
宽度：100px；
边框：2倍纯黄色；
背景颜色：浅绿色
}
.1{
高度：100px；
宽度：100px；
边框：2倍纯黄色；
边界半径：50px 10px；
背景颜色：绿色
}
.2{
高度：100px；
宽度：100px；
边框：2倍纯黄色；
边界半径：10px 50px；
背景颜色：绿色
}
div{
浮动：左
}

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

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

例如，如果您有一个div，希望为其提供背景图像并使其重复，通常这将是一个类似砖墙的图像，该砖墙经过设计和裁剪以重复，而不显示一个平铺图像开始和结束的接缝

使用上面的html，我将指定背景图像和背景重复的主体元素css，以便在整个站点上平铺它。

也许您正在寻找背景图像

div{
背景图像：url（“https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a");
背景重复：重复；
宽度：100%；
高度：500px；
边框：1px纯红；
}


对于（x=0；xi如果您在堆栈溢出中搜索CSS图像重复，您应该能够找到答案。：-）供参考，类似的问题可能会被否决并搁置。html或CSS中没有图像。真的吗？您更关注语法，这是一个可行的解决方案。感谢您这么做，而不是期待其他人来清理它！
<!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>