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

Разное 

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

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

Вопрос задан

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

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

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

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

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

Почта

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

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

Почта

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

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

Как вставить картинку в html страницу

  • Как вставить картинку
  • Альтернативный текст и всплывающая подсказка

Текстовое содержимое веб-страницы является частью HTML-документа, окруженной тегами, определяющими смысл и цель каждой части текста. Изображения, с другой стороны, являются внешними файлами и фактически не являются частью веб-страницы. Изображения на страницу встраиваются с помощью тега

<img>. Отображение веб-страницы, которая включает в себя изображения, представляет собой двухэтапный процесс: сначала браузер загружает разметку, а затем загружает внешние изображения. Везде, где в коде HTML-документа расположен тег <img>, браузер запрашивает с веб-сервера файл, на который ссылается тег, и отображает его на месте тега.

Как вставить картинку

HTML тег <img> относится к элементам, вставляющим контент, то есть сам элемент не добавляется непосредственно на веб-страницу, браузер создаёт пространство требуемого размера, в котором отображается изображение, на которое он ссылается. Тег <img> является одиночным тегом, не имеющим содержимого, он имеет обязательный атрибут

src, указывающий путь (относительный или абсолютный) к графическому файлу.

Браузеры обрабатывают картинки, как строчные элементы, поэтому они будут располагаться на одной строке с текстом или другими строчными элементами (включая другие картинки):


<html>
  <body>

    <p>
      Это смайлик:<img src="smile.jpg">, он улыбается.
    </p>

  </body>
</html>

Попробовать »

Альтернативный текст и всплывающая подсказка

Атрибут alt является еще одним обязательным атрибутом HTML тега <img>, он предоставляет альтернативный текст, отображаемый когда изображение недоступно. Это может произойти к примеру из-за того, что неверно указано расширение изображения, неправильно прописан путь и т.д.


<html>
  <body>

    <p>
      <img src="slon.jpg" alt="На картинке нарисован слон">
    </p>

  </body>
</html>

Попробовать »

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

Хорошо написанный альтернативный текст может информировать пользователя, что отсутствующее изображение это логотип, фотография, иллюстрация, портрет, пейзаж, эскиз, карта, диаграмма и так далее.

Картинки, которые не относятся к основному содержимому страницы, а имеют чисто декоративный характер, тоже должны иметь атрибут alt, но вместо описания их декоративных свойств его значение можно оставить пустым (alt="").

Примечание: если вам нужно добавить всплывающую подсказку, с дополнительным описанием к картинке, то вы можете воспользоваться глобальным атрибутом title: 


<html>
  <body>

    <p>
      Это смайлик:<img src="smile.jpg"
	  title="улыбающийся смайлик">, он улыбается.
    </p>

  </body>
</html>

Попробовать »

Чтобы увидеть всплывающую подсказку, то есть информацию, размещённую в атрибуте title, надо навести курсор мыши на картинку.

С этой темой смотрят:

  • HTML картинки, форматы изображений
  • Изменение размера картинки в html
  • Как сделать картинку ссылкой
  • HTML тег <img>
  • Добавление картинки на задний фон

Как расположить одно изображение поверх другого в HTML/CSS

Иногда вам может понадобиться расположить одно изображение поверх другого. Это легко сделать с помощью HTML и CSS. Для этого вы можете использовать свойства CSS position и z-index.

Сначала мы собираемся показать пример использования свойства position.

  • Используйте
    с именем класса «родительский».
  • Добавьте два элемента
    со следующими именами классов: «image1» и «image2».

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

 <дел>
  
   jpeg" />
  • Добавить относительный элемент div, размещенный в потоке страницы.
  • Установить фоновое изображение как относительное, чтобы элемент div знал, насколько большим он должен быть.
  • Установить наложение как абсолютное, которое будет относиться к верхнему левому краю контейнера div.

Мы размещаем фоновое изображение в начале контейнера, а затем устанавливаем оверлейное изображение так, чтобы оно начиналось через 30 пикселей после фона.

 .родитель {
  положение: родственник;
  сверху: 0;
  слева: 0;
}
.изображение1 {
  положение: родственник;
  сверху: 0;
  слева: 0;
  граница: 1px сплошная #000000;
}
.изображение2 {
  положение: абсолютное;
  верх: 30 пикселей;
  слева: 30 пикселей;
  граница: 1px сплошная #000000;
}

Давайте посмотрим полный пример.

Пример размещения изображения поверх другого с использованием свойства position: 

 

  <голова>
    Название документа
    <стиль>
      . родитель {
        положение: родственник;
        сверху: 0;
        слева: 0;
      }
      .изображение1 {
        положение: родственник;
        сверху: 0;
        слева: 0;
        граница: 1px сплошная #000000;
      }
      .изображение2 {
        положение: абсолютное;
        верх: 30 пикселей;
        слева: 30 пикселей;
        граница: 1px сплошная #000000;
      }
    
  
  <тело>
    <дел>

Попробуй сам »

Результат

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

Теперь давайте рассмотрим пример, в котором мы используем как свойства position, так и z-index.

Пример размещения изображения поверх другого с использованием свойств position и z-index:

Z-индекс — это свойство CSS, определяющее, какой элемент следует накладывать, а какой — в фоновом режиме. Идея состоит в том, чтобы представить ось Z перпендикулярно экрану. Чем выше z-индекс элемента, тем этот элемент будет отображаться ближе к тому, который просматривает страницу, тем самым перекрывая другие элементы с более низким z-индексом.

 

  <голова>
    Название документа
    <стиль>
      .изображение1 {
        положение: абсолютное;
        верх: 10 пикселей;
        слева: 10 пикселей;
        граница: 1px сплошная #000000;
        z-индекс: 1;
      }
      .изображение2 {
        положение: абсолютное;
        верх: 25 пикселей;
        слева: 25 пикселей;
        граница: 1px сплошная #000000;
        z-индекс: 2;
      }
    
  
  <тело>
     jpeg" />

Попробуй сам »

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

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

спросил

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

Просмотрено 55 тысяч раз

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