Как наложить картинку на картинку в css: css3 - Фон или картинку на картинку CSS

Содержание

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

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

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

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

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

надо срочно поставить картинку на картинку. знаю что ставится абсолютом , но вот проблема такая , что из за этого сам 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 — Как наложить картинку на блок?

Вопрос задан 6 лет 4 месяца назад

Изменён 5 лет 2 месяца назад

Просмотрен 3k раз

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

 #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 Overlay Image Over Image

by Ashfaq Ahmed

Demo Загрузить

Используя CSS, мы можем легко наложить изображение на другое изображение. Добавление изображения к другому большему изображению. Как вы видели на миниатюрах видео на YouTube — кнопка воспроизведения отображается в верхней части миниатюры видео.

JQuery Overlay Effect — Причудливый аним…

Включите JavaScript

JQuery Overlay Effect — Причудливый анимационный эффект

В этом уроке я покажу вам два различных метода размещения изображения поверх другого изображения. Поместить одну фотографию рядом с другой очень просто с помощью CSS-элемента position.

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

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

См. также: Добавить наложение градиента фонового изображения

Если вы хотите добавить кнопку воспроизведения поверх изображения, лучше использовать полупрозрачное изображение в формате PNG с размером (например, 64 x 64).

Способ 1: наложение изображения поверх изображения с использованием фона

Первый способ наложения изображения поверх другого — определение его в качестве фона в CSS. Давайте сначала посмотрим на HTML-код.

У нас есть div-оболочка с изображением и пустым тегом span. Это изображение является нашим первым изображением, и мы добавили тег span, чтобы добавить второе изображение через CSS. Это будет кнопка воспроизведения видео.

 <дел>

Теперь CSS такой же простой, как HTML. Мы расположили оболочку так, чтобы она отображалась правильно.

Затем сначала поместите фон изображение как относительное, чтобы div знал, насколько большим он должен быть.

Для изображения мы устанавливаем ширину 100% и высоту автоматически, чтобы оно было отзывчивым и должно правильно изменять размер.

Вот игра второго изображения.

Во-первых, мы размещаем оверлейное изображение как абсолютное в верхнем левом углу первого изображения. Мы устанавливаем значение всех его элементов равными нулю, чтобы правильно выровнять их.

Опять же, мы добавили ширину и высоту, но на этот раз мы установили значения обоих элементов на 100%, чтобы они работали на мобильных устройствах.

Нам также нужно добавить z-index ко второму изображению над первым.

Мы добавили фоновое изображение с двумя правилами. Первое не должно повторяться, а второе должно располагаться по центру.

Метод 1: Поместите изображение поверх изображения

Во втором методе мы не будем определять второе изображение в качестве фона в CSS. Но мы разместим оба изображения рядом на HTML-странице.

Вот так, мы помещаем оба изображения в контейнер. Оба имеют уникальные классы, но помните, что класс parent-img-responsive используется только для того, чтобы убедиться, что изображение работает на мобильных устройствах.