多个背景依次重复

Question

如何按顺序制作多张背景图片？

通过执行以下操作，图像只是重叠，并且不会按顺序显示

img {
background-image: "image1.jpg", "image2.jpg", image3.jpg";
background-repeat: repeat-y, repeat-y, repeat-y;
}

我想做的是...... 此搜索 图像2 图像3 此搜索 图像2 图像3 等等..

Answer 1

MDN对multiple backgrounds的阅读很好。

如果你想按顺序重复背景，即

img01 img02 img03 img01 img02 img03
img01 img02 img03 img01 img02 img03
img01 img02 img03 img01 img02 img03
img01 img02 img03 img01 img02 img03

你可能需要作弊。您可以为每个背景图像指定不同的方向，但我不认为这会扩展到混合平铺图案。定位仅限于普通的top，bottom，left，right以及单个实例的像素值等...

您可以做什么以每个图像保存您希望重复的图块大小，并为其他图像保留透明空间。想象一下，这些线条都是垂直排列的图像

|img01              |
|      img02        |
|             img03 |

当3个图像重叠时，您将看到每个图像通过其他图像。这将产生平铺效果。然后，您可以简单地指定：

background:repeat, repeat, repeat;

重叠图像将按照正常方式平铺，但重叠将使它们看起来像这样：

|img01 img02 img03|img01 img02 img03|
|img01 img02 img03|img01 img02 img03|