Совместите 2 изображения в фоновом режиме в div - PullRequest
Новая
       8

Совместите 2 изображения в фоновом режиме в div

0 голосов
/ 13 июня 2018

Я хотел бы поместить 2 изображения в качестве фонового изображения внутри div.

Это код, который я поставил, но я вижу только второе изображение. 

#wrap-header {
  max-width: 100%;
  height: 400px;
  background-image: url("../assets/header_background.png"), url("../assets/circle_header_background.png");
  background-repeat: no-repeat;
  background-position: center bottom, center top;
}

<div id="wrap-header">

</div>

Iхочу получить эффект одного изображения под другим или одного изображения в качестве первого слоя, а второго вверху.

Я не могу найти способ.Не могли бы вы помочь мне?

Ответы [ 4 ]

0 голосов
/ 13 июня 2018

Вы можете просто сделать это с помощью background-size: 100% 50%, где первое значение из 100% указывает ширину изображения , а второе высота , которая установлена ​​на 50% или всегда половина #wrap-header height: 

#wrap-header {
  /*max-width: 100%; by default*/
  height: 400px;
  background-image: url('https://placeimg.com/1600/200/any'), url('https://placeimg.com/1600/201/any');
  background-repeat: no-repeat;
  background-position: bottom, top;
  background-size: 100% 50%;
}
<div id="wrap-header"></div>
0 голосов
/ 13 июня 2018

Это можно сделать с помощью псевдоэлементов: before и: after 

#wrap-header {
  max-width: 100%;
  height: 400px;
}

#wrap-header:before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("https://boutiqueme.com/static/4/generated/30-pattern-44-ff81c0.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#wrap-header:after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("https://cdn.pixabay.com/photo/2016/04/12/00/04/hero-1323464_960_720.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
<div id="wrap-header">

</div>
0 голосов
/ 13 июня 2018

Вы можете использовать селектор :before и :after pseudo, чтобы достичь этого 

/* Set #wrap-header to relative so that :before and :after does not goes outside */
#wrap-header {
  max-width: 100%;
  height: 400px;
  position: relative;
}

#wrap-header:before,
#wrap-header:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

/* Set First Background Image */
#wrap-header:before {
  background: url("http://via.placeholder.com/850x450") center bottom no-repeat;
}

/* Set Second Background Image */
#wrap-header:after {
  background: url("http://via.placeholder.com/900x450") center top no-repeat;  
  opacity: 0.3; /* Set transparency as per your requirement */
}
<div id="wrap-header">

</div>
0 голосов
/ 13 июня 2018

Это можно сделать с помощью селекторов CSS : после и : до

Сначала добавьте следующее в # wrap-header: 

#wrap-header {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: 400px;
}

А затем используйте селекторы: 

#wrap-header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background-image: url('image1');
    background-repeat: no-repeat;
    background-position: center
}

#wrap-header:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background-image: url('image2');
    background-repeat: no-repeat;
    background-position: center;
}
...