多个 div 的单一背景

Question

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

没有背景的 DIV：

背景：

具有背景的 DIV：

Answer 1

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

If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.

.container {
  background-color: gray;
}

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

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

Answer 2

最近怎么样？我对 HTML 和 CSS 还是比较陌生，但我认为我们可以一起解决这个问题！

您的 "WHOLE" 图片可能存在于包含其他 "WINDOW" 元素的 a 中...其中每个 window 元素都相对于父 div 定位包含整个图片

.whole{
  
  position:relative;
  
}

.UpperL{

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

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

  position:...;

}
.LowerR{

  position:...;

}

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

代码还没有运行好，但是在第五个 window 中设置四个 windows 的目的是给四个属性能力] 看穿第五个；

如果您的父项包含图像，但仍然全白（不透明度为 100%），则四个 window 元素应该能够透过第五个 window 的不透明度（调低不透明度以显示图像）。

嗯...

Answer 3

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

多个 div 的单一背景

Single Background for Multiple Divs

html

javascript

css

svg

png