Наложить картинку на картинку css: css3 — Фон или картинку на картинку CSS — Вебджем.рф

Содержание

html — Как наложить картинку на блок?

У меня есть блок и есть картинка. Как наложить одно на другое?

 #box {
     width: 100%;
     height: 150px;
     background-color: #15B575;
     }

    #logo {
     margin-top: 50px;
    }

  <header>
      <div></div>
      <img scr='somefoto'>
    </header>

Не понимаю как поднять картинку.

html
css
html5
css3

#box {
 width: 100%;
 height: 150px;
 background-color: #15B575;
 }

#logo {
 margin-top: 50px;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  z-index: 2;
}
header {
position: relative;
}

<header>
  <div></div>
  <img scr='somefoto'>
</header>

Самым простым и наиболее сопроводжаемым решением будет вложить картинку в блок и задать блоку

position: relative;, а картинке position: absolute;.

Далее смещать картинку с помощью CSS-свойств left, right, top, bottom от соответствующей стороны блока в нужных вам единицах измерения.

#box {
  position: absolute;

  /* Просто для демонстрации */
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

#logo {
  position: relative;

  /* Просто для демонстрации */
  left: 30px;
  top: 20px;
  right: 40px;
}

<div>
  <img src="http://lorempixel.com/output/nature-q-c-200-100-6.jpg" />
</div>

Попробуйте использовать отрицательное значение свойства margin-top, например:

#logo {
    display: block;
    margin-top: -50px;
}

Хотя, судя по названию блоков, правильнее разместить картинку с логотипов внутри контейнера с id box.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Наложить картинку на картинку в пределах блока

Задать вопрос

Вопрос задан 3 года 2 месяца назад

Изменён 3 года 2 месяца назад

Просмотрен 88 раз

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

.wrap img {
  position: absolute;
  top: 0;
  left: 0;
}

.wrap {
  img:last-child {
      &:hover {
        opacity: 0;
      }
  }

  }

<div>
  <img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" alt="">
  <img src="http://notwebsafe.com/presos/web-hipster/images/CSS3_Logo.png" alt="">
</div>

<div>
  <img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" alt="">
  <img src="http://notwebsafe.com/presos/web-hipster/images/CSS3_Logo.png" alt="">
</div>

<div>
  <img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" alt="">
  <img src="http://notwebsafe.  com/presos/web-hipster/images/CSS3_Logo.png" alt="">
</div>

<div>
  <img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" alt="">
  <img src="http://notwebsafe.com/presos/web-hipster/images/CSS3_Logo.png" alt="">
</div>

<div>
  <img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" alt="">
  <img src="http://notwebsafe.com/presos/web-hipster/images/CSS3_Logo.png" alt="">
</div>

Первую картинку оставить как есть, вторую сделать абсолютно спозиционированной. wrap’у поставить position:relative;.

Ты можешь одну из картинок поставить в background, а для второй указать ширину и высоту идентичные твоему блоку, судя по коду который ты отправил в этом блоке только картинки и будут

Можно несколько изображений добавить в background-image, последнее изображения в списке будет в самом нижнем слое:

. wrap {
  position: absolute;
  top: 0;
  left: 0;
  width:600px;
  height:175px;
  background:
    url(https://picsum.photos/id/101/110/110) no-repeat 0 0,
    url(https://picsum.photos/id/102/120/120) no-repeat 50% 50%,
    url(https://picsum.photos/id/103/100/100) no-repeat 100% 100%,
    url(https://picsum.photos/id/100/600/175) no-repeat 50% 50%;
}

.wrap:hover {
  background:
    url(https://picsum.photos/id/102/120/120) no-repeat 50% 50%,
    url(https://picsum.photos/id/100/600/175) no-repeat 50% 50%;
}

<div></div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

html — Использование CSS для отображения изображения поверх изображения: запрос тегов положения

спросил 9 лет, 11 месяцев назад

Изменено 3 года, 2 месяца назад

Просмотрено 54к раз

Я создал код для отображения изображения поверх изображения. вот код: