Question

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：高度250px

Div 2：高度250px

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

PS 。两个div是块

Answer 1

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

Answer 2

更新

尝试一下，在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;
  }

确保从您的身体上删除其他背景图像。

原始帖子

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

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

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

让我知道您是否正在寻找

Answer 3

检查背景

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

背景图片将填充2格

3 个答案: