Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Как наложить картинку на картинку в 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

1 

#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>

2

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

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

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

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

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

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

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

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

Почта

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

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

Почта

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

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

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

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

Вопрос задан

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

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

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

спросил

Изменено 6 лет, 7 месяцев назад

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

Я искал несколько часов и не нашел решения своей проблемы.

Хочу наложить две картинки на другую, несмотря на десятки туториалов по этому поводу, никак не придёт применить к моему случаю.

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

вот часть кода, где я хотел бы решить мою проблему:

вот мой полный html код:

 
 
  <голова>
    <метакодировка="utf-8" />
    
    Антуан
 
<тело>
    <дел>
        <заголовок>
            <дел>
                     
Титул
 
                     
Су-титр
<ул>
  • меню 1 ?
  • меню 2
  • меню 3
  • меню 4
    • png'> <ул>
  • План сайта
  • Упоминает судебные органы
  • Контактное лицо
    • <ул>

    Заранее спасибо за помощь.

    • html
    • css
    • image
    • z-index

    На самом деле эти свойства именно то, что вам нужно. Вот как их использовать. Допустим, ваши изображения имеют класс .overlay-img . Поместите их в контейнер с классом .img-container .

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

    Теперь изображения должны располагаться друг над другом. Использование

    z-index свойство, вы также можете указать, какой из них находится сверху. Чем выше значение, которое вы укажете, тем выше будет отображаться элемент.

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

    Если вы хотите наложить изображение поверх другого, вам просто нужно сделать второе изображение абсолютным, а с помощью z-index определить, какое изображение будет сверху, например:

     .top {
  положение: абсолютное;
  слева: 100 пикселей;
  верх: 100 пикселей;
  граница: 1px сплошной черный;
  z-индекс: 1;
 } 
     <дел>

    0

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

    Этот элемент должен иметь позицию: относительную . Поместите туда свои изображения с position: absolute и установите top: 0; осталось:0 .

    Далее вам нужно будет указать z-index , чтобы показать одно поверх другого.

    Итак, в основном у вас будет что-то вроде:

    и в вашем css например:

     .container{
  положение: родственник;
}
.контейнер > изображение {
  положение: абсолютное;
  верх:0;
  слева:0;
}
.container> img: первый ребенок {
  z-индекс: 2;
}

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

    Это очень распространенная вещь в HTML, и вы должны убедиться, что понимаете ее концепции (позиционирование CSS и наследование), так как это будет очень важно для дальнейшего.

    1

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

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя адрес электронной почты и пароль

    Опубликовать как гость

    Электронная почта

    Обязательно, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

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

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

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

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

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

     <дел>

    Мы размещаем фоновое изображение в начале контейнера, а затем устанавливаем оверлейное изображение так, чтобы оно начиналось через 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;
      }
    
  
  <тело>
    <дел>
       jpeg" />

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

    Результат

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

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

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

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

    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *