Как в css вставить картинку на картинку: Как добавить изображение на страницу — журнал «Доктайп»

Leave a Comment / Css / By /

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

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

Вопрос задан

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

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

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

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

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

3

Можно несколько изображений добавить в 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>
14

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

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

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

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

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

Почта

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

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

Почта

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

CSS Overlay Image Over Image

by Ashfaq Ahmed

Demo Скачать

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

Пожалуйста, включите JavaScript

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

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

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

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

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

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

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

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

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

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

 <дел>
    Мой значок видео

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

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

 .thumb-обертка {
должность: родственница;
}

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

 .thumb-wrapper img{
ширина:100%;
высота:авто;
}

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

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

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

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

 .thumb-wrapper span {
положение: абсолютное;
сверху: 0;
дно:0;
слева: 0;
справа: 0;
ширина: 100%;
высота: 100%;
z-индекс: 100;
фон: прозрачный URL (img/play-button.
  png) без повтора;
фоновая позиция: центр;
}

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

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

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

 <дел>

Этот метод содержит меньше кода CSS по сравнению с первым методом. Все, что нам нужно, это расположить родительское изображение. Чтобы хорошо отображалось на мобильных устройствах, мы устанавливаем ширину 100% и высоту автоматически.

 
 .parent-img{
    положение: родственник;
}
.parent-img-отклик {
ширина:100%;
высота:авто;
}

Для дочернего изображения (Второе изображение) Мы будем использовать абсолютную позицию и установим для всех его правил значение 0, чтобы выровнять его по верхнему правому краю родительского изображения.

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

 .child-img{
    положение: абсолютное;
    сверху: 0;
    слева: 0;
    справа: 0;
}

Предположим, вы хотите выровнять его по правому краю. Код будет таким:

 .child-img{
    положение: абсолютное;
    сверху: 0;
    справа: 0;
}

Если вы хотите переместить его в правом нижнем углу.

 .child-img{
    положение: абсолютное;
    внизу: 0;
    справа: 0;
}

Чтобы переместить его вниз влево, вам нужно добавить слева: 0 и снизу: 0

 .child-img{
    положение: абсолютное;
    внизу: 0;
    слева: 0;
    справа: 0;
}

Вы можете выбрать любой метод и внедрить его на свой сайт. Оба работают хорошо, и это зависит от вас, какой из них вы легко понимаете и можете настроить в соответствии со своими потребностями.

Работа с изображениями в Figma

Это может показаться очевидным, но чтобы начать работать с изображениями в Figma, вам нужно сначала импортировать их в свой файл. Вы можете сделать это из меню, перейдя к File , затем щелкнув Place Image . Вы также можете найти эту же опцию в нижней части раскрывающегося списка «Инструменты формы» или нажав удобную комбинацию клавиш 9.0051 Shift + Command + K .

Затем откроется файловый браузер, который позволит вам выбрать несколько изображений. Отсюда, однако, мы не просто бросаем их все волей-неволей на ваш холст. Вместо этого Figma позволяет добавлять их по одному, щелкая или перетаскивая. Это дает вам гораздо больше контроля над размещением и размером изображений при импорте.

Это может показаться простой вещью, но на самом деле она довольно мощная, особенно если учесть, как изображения обрабатываются в Figma. Позвольте мне очень быстро перемотать назад и объяснить почему.

В Figma мы не рассматриваем изображения как отдельный тип объекта, вместо этого мы рассматриваем их как заливки. Когда вы импортируете изображение, мы создаем прямоугольник с такими же размерами и применяем к нему заливку изображения. Если вы знакомы с CSS, подумайте об этом как о установке изображения в свойстве background элемента div. На первый взгляд, это не обязательно так уж много значит, ваше изображение все равно должно выглядеть одинаково, но преимущество в том, что это значительно упрощает обрезку, изменение размера и замену изображения во время разработки.

Итак, вернемся к импорту. Как я уже сказал, когда вы используете метод Place Image , вы получаете возможность добавлять несколько изображений одно за другим. Круто то, что, поскольку изображения обрабатываются как заливки, вы можете использовать этот метод для добавления выбранных изображений к уже существующим фигурам. Одним из вариантов использования этого может быть быстрое добавление изображений профиля к трем различным дизайнам (круг, квадрат и прямоугольник со скругленными углами), которые вы хотите протестировать.

Второй метод импорта — перетаскивание. Со своего рабочего стола или из папки на компьютере вы можете просто перетащить одно или несколько изображений в Figma. С помощью этого метода мы размещаем их на холсте выровненными рядами по десять штук. Преимущество этого заключается в том, что вы можете быстро воспользоваться преимуществами наших новых функций Smart Selection. Просто выберите все изображения, которые вы импортировали, а затем отрегулируйте интервал. Или, если вы хотите получить действительно фантазию, вы можете быстро создать сетку, а затем поменять местами их, как настоящую фотоленту.

Эти два метода импорта — импорт с помощью метода размещения изображения или путем перетаскивания — чрезвычайно универсальны, но они требуют, чтобы у вас уже были загружены изображения на ваш компьютер. Итак, что, если вы хотите быстро изучить кучу идей, не занимая драгоценное место на жестком диске? Не волнуйтесь, Figma вас прикроет.

Третий способ импорта изображений — простое копирование и вставка. Когда вы просматриваете это идеальное изображение и думаете, что нашли его, просто щелкните правой кнопкой мыши изображение и выберите «Копировать».