Css div 浮动在 flex 背景图片上

Question

我想要 div class item2 浮动在背景图片上，但它失败了。我该如何解决？

html

<div class="flex_img" >
      <div class="item2 ">
        <div >up1</div>
        <div >up2</div>
      </div>
      <div class="item2 ">
        <div >down1</div>
        <div >down2</div>
      </div>
    </div>

css

.item2{
  flex: 1 1 100%;
  background-color: #f08bc3;
   display: flex;
  justify-content: space-between;
}

.flex_img {
  flex: 0 0 100%;
  background-color: #f08bc3;
  width:100%;
  height:175px;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  align-content:space-between;
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
                  url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
  background-position: center;
  background-position:left; 
}

下面是我要的

Answer 1

如果您想将 item2 放在彼此的下方，这很有效

.item2{
  background-color: #f08bc3;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.flex_img {
  background-color: #f08bc3;
  width:100%;
  height:175px;
  display: flex;
  flex-direction: column;
  flex-wrap:wrap;
  align-content:space-between;
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
                  url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
  background-position: center;
  background-position:left; 
}

Answer 2

这是我添加的新代码：

/* New Code */

.flex_img {
  position: relative;
}

.item2{
  position: absolute;
  width: 100%;
  opacity: 0.7;
}

.item2:nth-of-type(1){
  top: 0;
}

.item2:nth-of-type(2){
  bottom: 0;
}

基本上，我给图像一个相对位置，给两个重叠的 div 一个绝对位置，然后正确定位它们。我还给了它们 0.7 的不透明度，这样你就可以看到它们在图像上：

.item2{
  flex: 1 1 100%;
  background-color: #f08bc3;
   display: flex;
  justify-content: space-between;
}

.flex_img {
  flex: 0 0 100%;
  background-color: #f08bc3;
  width:100%;
  height:175px;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  align-content:space-between;
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
                  url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
  background-position: center; 
  background-position:left; 
}

/* New Code */

.flex_img {
  position: relative;
}

.item2{
  position: absolute;
  width: 100%;
  opacity: 0.7;
}

.item2:nth-of-type(1){
  top: 0;
}

.item2:nth-of-type(2){
  bottom: 0;
}

   <div class="flex_img" >
      <div class="item2 ">
        <div >up1</div>
        <div >up2</div>
      </div>
      <div class="item2 ">
        <div >down1</div>
        <div >down2</div>
      </div>
    </div>

Answer 3

为 .item2 中的 div 添加一个 class 名称。然后为新 class 应用背景。然后你也可以调整新 class 的边距和填充。

<div class="flex_img" >
  <div class="item2 ">
    <div class="newclass">up1</div>
    <div class="newclass">up2</div>
  </div>
  <div class="item2 ">
    <div class="newclass">down1</div>
    <div class="newclass">down2</div>
  </div>
</div>

.newclass {
  background-color: #f08bc3;
  margin: <value>;
  padding: <value>;
}

Css div 浮动在 flex 背景图片上

Css div float on the flex backgroud image

css

background-image

flexbox