javascript - 如果不是图像，如何使HTML元素重复以适合整个背景

我想有一个div元素，可以将其设置为使用CSS *重复，但似乎只有背景图像（background-image：...; background-repeat：repeat;）才有可能。我该如何使用常规div？

注意：div包含一个svg，其中包含2个多边形（2个直角三角形组成一个正方形。我希望它们覆盖整个屏幕）。

*编辑：尝试使用CSS进行此操作，得到非常奇怪的结果。我认为Javascript是一个更好的选择。

        <div class='square' style="background-repeat:repeat-x;">
            <svg viewBox='0 0 100 100'>
                <polygon points='0,0 2,0 0,2' />
                <polygon points='2,0 2,2 0,2' />
            </svg>
        </div>

最佳答案

这是@yezzz提到的CSS方法。

html, body {padding: 0; margin: 0;}

body {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyIDIiIHhtbDpzcGFjZT0icHJlc2VydmUiPiAgICAgIDxwb2x5Z29uIHBvaW50cz0nMCwwIDIsMCAwLDInIGZpbGw9JyNjYzU1NTUnIC8+ICA8cG9seWdvbiBwb2ludHM9JzIsMCAyLDIgMCwyJyBmaWxsPScjNTVjY2NjJyAvPjwvc3ZnPg==);
  height: 100vh;
  width: 100vw;
  background-size: 100px;
}

编码的SVG可以用以下形式表示：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 2 2" xml:space="preserve">
  <polygon points='0,0 2,0 0,2' fill='#cc5555' />
  <polygon points='2,0 2,2 0,2' fill='#55cccc' />
</svg>

关于javascript - 如果不是图像，如何使HTML元素重复以适合整个背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44055473/