html - 多个背景按顺序重复

Question

如何依次制作多张背景图片？

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

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

我想做的是... 图片1 图片2 图3 图片1 图片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 和单个实例的像素值等。 ..

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

|img01              |
|      img02        |
|             img03 |

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

background:repeat, repeat, repeat;

重叠的图像会正常平铺，但重叠会使它们看起来像这样:

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