Как мы помещаем изображение поверх другого изображения

Question

Как мы помещаем изображение поверх другого изображения

0

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

Что я хочу сделать, так это разместить логотип.png внутри main.png. Но main.png находится в фоновом изображении, и я хочу сохранить его таким образом. Итак, как я могу достичь этого?

HTML

<div class="ImageMain">
</div>

<div class="LogoMain">
</div>

CSS

  .ImageMain {
        z-index:1;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-image:url(../Resources/Images/HomeMain.jpg);
        background-size:cover;
        background-position:50% 50%;
        background-repeat: no-repeat;
    }

    .LogoMain {
        z-index:2;
        background-image:url(../Resources/Images/Main%20Logo.png);
        position:relative;

    }

Я также пробовал это.

CSS
.wrapper {
    position:relative;
.ImageMain {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(../Resources/Images/HomeMain.jpg);
    background-size:cover;
    background-position:50% 50%;
    background-repeat: no-repeat;
}

.LogoMain {
    z-index:2;
    background-image:url(../Resources/Images/Main%20Logo.png);
    position:absolute;

Я добавил обертку и сделал положение логотипа абсолютным. Я также добавил индекс z. Он все еще не работает.

user3219918 18 апр. 2014, в 21:10

Источник

Теги:

html

css

image

4 ответа

Ещё вопросы

alxscms · Answer 1 · 2014-04-18T17-11-00.000Z

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

<div class="wrapper">
  <img src="Main.jpg" alt="Home"/>
  <img src="Logo.jpg" alt="Logo" class="logo"/>
</div>

И для css:

.wrapper {
  position: relative;
}

.logo {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}

Ниже приведен пример jsfiddle для иллюстрации решения: http://jsfiddle.net/bYwh8/

Второе решение было бы использовать несколько фонов CSS3, вы можете увидеть пример в этом jsfiddle: http://jsfiddle.net/azLPn/ и получить более подробную информацию здесь http://www.css3.info/preview/multiple- фоны /

Это работает, но мне нужен предыдущий код без изменений, поэтому нет тегов img. Я хочу использовать фоновые изображения в обоих тегах div.
Вам определенно нужен обертка с относительным положением, чтобы дети знали, где их размещать, когда они расположены абсолютно. За исключением этой обертки, которую вам нужно добавить, довольно легко адаптировать код, который я вам дал.
Перечитайте вопрос. Опубликовать несколько ответов, но я не смогу ответить некоторое время. Я должен спать (здесь 1 час ночи). Итак, я бы вернулся к вам, когда я проснусь :). (7-8 часов)
Что вы можете сделать, это создать jsfiddle со своей проблемой или продолжить поиск самостоятельно, попытаться понять, что вы делаете в вашем CSS, и вы найдете решение. Что вы получаете от stackoverflow, так это советы, которые вам помогут, а не люди, которые пишут для вас. Первое, что вы можете сделать, это установить ширину и высоту div'ов в соответствии с шириной и высотой их фонового изображения, затем первый div не имеет точки, чтобы быть абсолютным, а второй должен быть просто абсолютным, а его верхняя и левая позиции равны 0.

ashique · Answer 2 · 2014-04-18T17-52-00.000Z

Самый простой способ сделать это:

HTML:

<div class="wrapper">
  <img src="image1.jpg" id="image1"/>
  <img src="image2.jpg" id="image2"/>
</div>

CSS:

#image1{
  position:absolute;
  top:0px;
  left:0px;
}

#image2{
  position:absolute;
  top:0px;
  left:0px;
}

на этом этапе изображение2 уже находится на изображении1. Если вы хотите, чтобы изображение2 отображалось на изображении 1 и 1, чтобы быть частично видимым, добавьте следующее:

#image2{
  z-index:2;
  opacity: 0.75;
}

"Непрозрачность" делает элемент прозрачным. Здесь непрозрачность: 0.75 означает, что изображение2 будет на 75% твердым и 25% прозрачным.

Надеюсь это поможет

Это помогло. Я понял, как это сделать. Спасибо

user3219918 · Answer 3 · 2014-04-18T23-54-00.000Z

Ура. Я понял, как это сделать с фоновым изображением. вот скрипка http://jsfiddle.net/RFnu2/1/.

HTML

<div class="wrapper">
  <div id="MainPic"/> </div>
  <div class="Logo" >
    <img src="http://bit.ly/1jSi1Kj" id="MainLogo"/>
  </div>
</div>

CSS

#MainPic{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:50% 50%;
  background-repeat: no-repeat;
  background-image:url(http://bit.ly/1nv5VHM)
}

#MainLogo{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:20%;
}

.logo {
    width:100%;
    height:auto;
}

но я не мог понять, как центрировать логотип, чтобы он выглядел забавным, но он все еще работает.

tomascharad · Answer 4 · 2014-04-18T15-50-00.000Z

Обычно я использую тег изображения внутри div и добавляю фоновое изображение к этому div.

Обновление: я видел, как вы решили проблему, как я сказал, очень приятно! Теперь, чтобы правильно центрировать абсолютный позиционный div, вы можете добавить отрицательные значения для каждого свойства (сверху, снизу, справа и слева), и оно должно работать.

Что я хочу сделать, это разместить logo.png внутри main.png. Main.png - это фоновое изображение, поэтому я не могу этого сделать.