随机平铺背景

Question

我有5个完全相同的图块width/height，我想知道是否有办法将它们随机设置为背景。

position: relative;
background-image: url(assets/images/bg_tile1.png), url(assets/images/bg_tile2.png), url(assets/images/bg_tile3.png), url(assets/images/bg_tile4.png), url(assets/images/bg_tile5.png);
background-size: auto;
background-repeat: repeat;

这是我到目前为止的内容，我怎么能随机重复它们呢？就像它们在网格中一样（随机）：

1 4 2 1

2 3 4 1

3 1 5 5

Answer 1

您可以使用 SVG 对此进行近似。您构建一个会重复的随机模式。它不会是完全随机的，但它是一个很好的近似值。

这是一个 3x3 模式的示例：

svg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="bgimg" x="0" y="0" width="300" height="300"  patternUnits="userSpaceOnUse">
      <image xlink:href="https://picsum.photos/id/1055/100/100.jpg" x="0" y="0" height="100" width="100" />
      <image xlink:href="https://picsum.photos/id/1074/100/100.jpg" x="0" y="100" height="100" width="100" />
      <image xlink:href="https://picsum.photos/id/1080/100/100.jpg" x="0" y="200" height="100" width="100" />
      <image xlink:href="https://picsum.photos/id/1074/100/100.jpg" x="100" y="0" height="100" width="100" />
      <image xlink:href="https://picsum.photos/id/1065/100/100.jpg" x="100" y="100" height="100" width="100" />
      <image xlink:href="https://picsum.photos/id/1039/100/100.jpg" x="100" y="200" height="100" width="100" />
      <image xlink:href="https://picsum.photos/id/117/100/100.jpg" x="200" y="0" height="100" width="100" />
      <image xlink:href="https://picsum.photos/id/1024/100/100.jpg" x="200" y="100" height="100" width="100" />
      <image xlink:href="https://picsum.photos/id/1025/100/100.jpg" x="200" y="200" height="100" width="100" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="10000" height="10000" fill="url(#bgimg)" />
</svg>

随机平铺背景

Random tiled background

css

sass

background-image