多个Div的单一背景

Question

有没有办法让一个图像（PNG或SVG）作为多个div的背景？请参阅下面的图片，了解它的工作原理。此外，当屏幕宽度变小并且divs排列在彼此之下时，是否有办法改变背景以匹配它？

没有背景的DIV：

背景：

有背景的DIV：

Answer 1

您可能正在寻找background-attachment: fixed：

  

如果指定了背景图像，则为背景附件CSS   属性确定图像的位置是否固定在   视口，或与其包含块一起滚动。

＆＃13;

＆＃13;

.container {
  background-color: gray;
}

.window {
  background-image: url("https://i.stack.imgur.com/RPBBs.jpg");
  background-attachment: fixed;
  display: inline-block;
}

＆＃13;

<div class="container">
  <div class="window" style="width: 100px; height: 50px; margin: 20px;"></div>
  <div class="window" style="width: 200px; height: 50px; margin: 20px;"></div>
  <div class="window" style="width: 500px; height: 50px; margin: 20px;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用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>

Answer 3

怎么样？我对HTML和CSS仍然相对较新，但我认为我们可以一起解决这个问题！

你的＆＃34;整个＆＃34;图片可能存在于包含另一个＆＃34; WINDOW＆＃34; elements ...其中每个窗口元素相对于包含整个图片的父div来定位

＆＃13;

＆＃13;

.whole{
  
  position:relative;
  
}

.UpperL{

  position: absolute;
  height: 25px;
  width: 100px;

}
.UpperR{
  position:...;
  
}
.LowerL{

  position:...;

}
.LowerR{

  position:...;

}

＆＃13;

<div class="whole" img src="whole picture.png">
<!-- let the whole class contain the background image-->

  <div class="UpperL"> Upper Left Window</div>
  <div class="UpperR"> Upper Left Window</div>
  <div class="LowerL"> Upper Left Window</div>
  <div class="LowerR"> Upper Left Window</div>
</div>

＆＃13;

＆＃13;

＆＃13;

代码还没有运行良好，但是在第五个窗口内设置四个窗口的目的是让这四个窗口能够看到第五个窗口;

如果您的父级包含图像，但仍然是全白色（不透明度为100％），则四个窗口元素应该能够透视第五个窗口的不透明度（将其不透明度调低以显示图像）。

嗯...