多个Div的单一背景

Question

有没有一种方法可以将一个图像（PNG或SVG）作为多个div的背景？ 请查看下面的图片，了解其工作方式。 另外，当屏幕宽度变小并且div彼此排成一行时，是否还有一种方法可以更改背景以匹配该背景？

没有背景的DIV：

的背景：

具有背景的DIV：

Answer 1

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

如果指定了背景图像，background-attachment CSS属性将确定该图像的位置在视口中是固定的还是随其包含块一起滚动。

 .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

使用background-attachment: fixed将获得所需的效果。 您只需要确保您的背景图片可以在div的范围内工作，否则您将获得可通过background-repeat: none关闭的平铺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还是比较陌生，但是我认为我们可以一起解决这个问题！

您的“ WHOLE”图片可能存在于包含其他“ 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> 

该代码还不能很好地运行，但是在第五个窗口中设置四个窗口的目的是使这四个窗口具有透视第五个窗口的能力或属性。

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

嗯...