背景图片将填充 2 div答案

【问题标题】：background picture will fill 2 div背景图片将填充 2 div
【发布时间】：2018-06-21 15:10:35
【问题描述】：

body {
  padding: 0;
  background-image: url("https://cms-assets.tutsplus.com/uploads/users/107/posts/26488/final_image/41-space-scrolling-background850-2.jpg");
}
.container1 {
  background-color: blue;
  opacity: 0.5;
}
.container2 {
  background-color: blue;
  opacity: 0.5;
}

<div class="container1">
  <h1>Div no 1</h1>
</div>
<div class="container2">
  <h1>Div no 2</h1>
</div>

我有这 2 个 div 和一张背景图片

示例：

第 1 部分：高度 250 像素

第 2 部分：高度 250 像素

我的问题是背景图片的高度大于两个div之和。有没有一种方法可以在不降低图像质量的情况下填充两个 div？

附言。两个div是block

【问题讨论】：

嗨，您可以在问题中包含 HTML 和 CSS 吗？
很抱歉，您没有任何代码或图像。你能插入一些吗？我很确定我知道你的问题，但我需要确定。
你可以使用overflow: hidden for main div
@charankumar 这对背景图片无效
嗨，我更新了我的答案，所以你不必按照你的要求使用 px 单位。看看吧！

标签： html css

【解决方案1】：

将两个 div 打包到另一个“包装器”div，将背景设置为此父级和背景集background-size: auto 500px;

【讨论】：

【解决方案2】：

检查背景：

.imageOneDiv,.imageTwoDiv{
    display: block;
    height: 250px;
     opacity: 0.5;
 
}
.imageOneDiv{
   background-color: yellow;
}

.imageTwoDiv{
   background-color: green;
}

.main{
 padding: 0;
background-size: auto 500px; 
  background-image: url("https://cms-assets.tutsplus.com/uploads/users/107/posts/26488/final_image/41-space-scrolling-background850-2.jpg");
   background-repeat:no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="imageOneDiv">

  </div>
   <div class="imageTwoDiv">
   
  </div>
</div>

【讨论】：

【解决方案3】：

更新

试试这个，在 HTML 中封装一个类：

<div class="background">
  <div class="container1">
    <h1>Div no 1</h1>
  </div>
  <div class="container2">
    <h1>Div no 2</h1>
  </div>
</div>

在本例中为“背景”，在 CSS 样式中如下：

.background {
    background-image: url("https://cms-assets.tutsplus.com/uploads/users/107/posts/26488/final_image/41-space-scrolling-background850-2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }

确保从您的身体中移除其他背景图像。

原帖

尝试在 body 上设置background-size: ..px 500px;：

body {
background-size: ..px 500px;
}

这会将背景图像的高度设置为 500 像素。

让我知道这是否是您要找的。p>

【讨论】：

不使用px有没有别的办法？