javascript - 多个 div 的单一背景

Question

有没有办法将一张图片(PNG 或 SVG)作为多个 div 的背景？请参阅下面的图片，了解它是如何工作的。此外，当屏幕宽度变小并且 div 在彼此下方排列时，是否有一种方法可以更改背景以匹配它？

没有背景的 DIV:

背景:

具有背景的 DIV:

Answer 1

使用 background-attachment: fixed 会给你想要的效果。您只需要确保您的背景图像在 div 的范围内工作，否则您将获得可以使用 background-repeat: none

关闭的平铺

.border {
  border: 1px solid #000;
  position: absolute;
}

div {
  background-image: url("https://dummyimage.com/500x250/000/fff.png");
  background-attachment: fixed;
}

<div id="div1" class="border" style="height:100px;width:200px"></div>
<div id="div2" class="border" style="left:225px;height:100px;width:200px"></div>
<div id="div3" class="border" style="top: 125px;height:100px;width:225px"></div>
<div id="div4" class="border" style="left:250px;top:125px;height:100px;width:175px"></div>