Как я могу наложить изображения (PNG) на веб-сайте?

Question

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

Answer 1

Вам необходимо установить свойство z-index css.

HTML:

<img id="png1" src="png1.png" />
<img id="png2" src="png2.png" />

CSS:

#png1 {
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}

#png2 {
    position:absolute;
    /*
    set top and left here
    */
    z-index:1;
}

Вот демоверсия: http://jsfiddle.net/AlienWebguy/6VSBv/

Answer 2

Итак, вы новичок в HTML и CSS. Это не проблема, но ваш вопрос немного расплывчат для общего формата SO .

Однако в двух словах:

<style>
    #phone {background: url('http://www.knowabouthealth.com/wp-content/uploads/2010/06/iphone.jpg') center no-repeat; width: 300px; height: 392px; border: 1px solid #000000;}
    #display {background: #000000; margin: 80px auto 0px; width: 164px; height: 246px; color: #FFFFFF;}
</style>
<div id="phone">
    <div id="display">
        Hello! What is up? Miley rocks!
    </div>
</div>

Живой пример: http://jsfiddle.net/cbn4L/

Это, конечно, очень простой пример. И, как вы можете видеть, внутренний контейнер - это не изображение, а текст. Технически вы можете добавить туда изображение сейчас ... но поскольку мы облегчаем вам доступ к миру HTML и CSS, то это лучший пример и, возможно, может улучшить вашу концепцию:)

Answer 3

<img style="position:absolute;left:10px;top:10px;" src="img1.png">
<img style="position:absolute;left:20px;top:20px;" src="img2.png">

Конечно, вам нужно будет скорректировать координаты, и я настоятельно рекомендую поместить CSS в таблицу стилей вместо встроенного. Вот довольно хороший урок по CSS для получения дополнительной информации: http://www.csstutorial.net/