如何为多个 div 设置背景图像？答案

【问题标题】：How can I set a background image for multiple divs?如何为多个 div 设置背景图像？
【发布时间】：2022-01-19 17:25:34
【问题描述】：

我正在使用四个 div 来显示一些服务：

我想为四个图像使用背景图像，如本例所示：

http://de.wix.com/website-template/view/html/1326?originUrl=http%3A%2F%2Fde.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F1&bookName=create-master-new&galleryDocIndex=0&category=all&metaSiteId=

我该怎么做？分辨率应该是响应式的，所以我不能使用裁剪工具来剪切图像。

【问题讨论】：

所以你的意思是你想为所有四个 div 使用一个图像？你能澄清一下“响应式解决方案”是什么意思吗？你的意思是如果窗口缩小图像应该缩小？
是的，图像应该缩小。我不想在 Photoshop 中分割图像...
div的背景应该是一张大图。
@BenediktWinckler 检查我的答案，请反馈

标签： html css background

【解决方案1】：

这是更新后的Demo

这实际上是position: absolute 的游戏。您获得的示例站点也以相同的方式进行。它实际上是<img> 标签，而不是背景

这是代码：

.container{
	max-width: 600px;
	position: absolute;
	top: 10px;
}
img{
	max-width: 600px;
}
.divider{
	width: 10px;
	position: absolute;
	top: 0px;
	height: 100%;
	background: white;
}
.one{
	left: 150px;
}
.two{
	left: 300px;
}
.three{
	left: 450px;
}

<div class="container">
	<img src="https://static.wixstatic.com/media/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg/v1/fill/w_880,h_500,al_c,q_85/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg" alt="">
	<div class="divider one"></div>
	<div class="divider two"></div>
	<div class="divider three"></div>
</div>

【讨论】：

【解决方案2】：

对于响应式图像，我建议您尝试引导：

http://www.w3schools.com/bootstrap/bootstrap_images.asp

&lt;img class="img-responsive" src="img_chania.jpg" alt="Chania"&gt;

或者你可以使用 css 来做，点击链接： http://www.w3schools.com/css/css_rwd_images.asp

【讨论】：

这并没有回答让 div 传播图像的主要问题。

【解决方案3】：

在该示例中，div 是透明的，可以让背景图像透过。

假设您有四个窗口。你把一张巨大的照片放在他们身后。就是这些。

您可以对“背景：透明”的值进行更多研究以获取经验。

【讨论】：

【解决方案4】：

只是帮助你也许可以使用这个方法

*,:before,:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  position: relative;
  display: inline-block;
  height: 400px;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.divider {
  width: 25%;
  border: 10px solid #fff;
  position: relative;
  display: inline-block;
  float: left;
  top: 0px;
  height: 100%;
}

.btn {
  background: green;
  color: white;
  width: 100%;
  position: absolute;
  bottom: 3em;
  padding: 1em;
  text-align: center;
  text-decoration: none;
}

<div class="container">
	<img src="https://static.wixstatic.com/media/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg/v1/fill/w_880,h_500,al_c,q_85/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg" alt="">
	<div class="divider one"><a class="btn" href="#">Button</a></div>
	<div class="divider two"><a class="btn" href="#">Button</a></div>
	<div class="divider three"><a class="btn" href="#">Button</a></div>
	<div class="divider four"><a class="btn" href="#">Button</a></div>
</div>

【讨论】：

【解决方案5】：

这是一个响应速度更快的解决方案。它具有响应式 div（列和横幅）和背景。与示例网站不同，容器不是固定宽度。

https://jsfiddle.net/Lqzqo5xf/

您还可以通过将min-width 属性应用于.wrapper 类，将屏幕缩小到一定大小时，将容器设置为固定宽度。

就像您给出的示例一样，它需要 div 用于分隔符（白色列）和一个单独的容器，将容器与背景重叠。它还对分隔线使用绝对定位，但使用百分比来进行响应。

.wrapper {
  width: 100%;
  height:400px;
  margin:0;
  padding:0;
  position: absolute;
  top:0;
  left:0;
}

#bg-wrapper {
  background-image: url('http://www.gstatic.com/webp/gallery/1.jpg');
  background-size: cover; /** Also try "contain" **/
}

.banner {
  float: left;
  margin-top: 70px;
  width: 25%;
  height: 50px;
  background-color: rgba(0,0,0,0.7);
  vertical-align:middle;
  text-align: center;
  color:white;
}

.divider {
  position: absolute;
  width:2%;
  height: 100%;
  background-color: white;
  margin: 0 0 0 -1%;
  padding: 0;
}

<div class="wrapper" id="bg-wrapper">
    <div class="banner">
      <h4>
      willkommen
    </div>
    <div class="banner">
      <h4>
      willkommen
    </div>
    <div class="banner">
      <h4>
      willkommen
    </div>
    <div class="banner">
      <h4>
      willkommen
    </div>
</div>
<div class="wrapper">
  <div class="divider" style="left:25%;">
  </div>
  <div class="divider" style="left: 50%;">
  </div>
  <div class="divider" style="left:75%;">
  </div>
</div>

【讨论】：