是否可以混合重复的背景图像？

Question

当 background-repeat 设置为 repeat 时，是否可以混合单个 background-image 的迭代，如下所示：

也欢迎使用 javascript 的解决方案。

提前致谢

Answer 1

为此您需要 2 张图片。

无缝平铺

以及不平铺的起始顶部图像。

您的元素将使用可平铺元素作为背景。背景位置Y应该是不可平铺的高度。

然后您可以在位于顶部的元素顶部添加一个伪元素 ::before，该元素具有不可平铺图像的背景。

div
{
  position: relative;
  width: 813px;
  height: 2000px;
  border: 3px solid red;
  background-image: url(https://i.imgur.com/joeNpq8.png);
  background-repeat: repeat-y;
  background-position: 0 682px;
}

div::before
{
  content: '';
  width: 813px;
  height: 682px;
  background-image: url(https://i.imgur.com/iYgZFsw.png);
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

<div></div>

是否可以混合重复的背景图像？

Is it possible to blend repeated background images?

css

background-image