Css div float на изображении flex backgroud - PullRequest
Новая
       42

Css div float на изображении flex backgroud

0 голосов
/ 19 июня 2019

Я хочу, чтобы div класс item2 плавал на заднем плане, но это не удается. Как я могу решить это?

https://codepen.io/robinnpca/pen/QXKrON

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>

1009 * 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; 
}

ниже, я хочу enter image description here

Ответы [ 3 ]

1 голос
/ 19 июня 2019

Это новый код, который я добавил: 

/* 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;
}

По сути, я присвоил изображению относительную позицию, а два наложенных делителя - абсолютную, а затем расположил их правильно. Я также дал им прозрачность 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>
0 голосов
/ 19 июня 2019

Добавьте имя класса в div внутри .item2. Затем примените фон к этому новому классу. Затем вы можете настроить поля и отступы для нового класса. 

<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>;
}
0 голосов
/ 19 июня 2019

Это работает, если вы хотите расположить пункт 2 рядом друг с другом 

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