Показать одно .png изображение поверх другого .jpg image - PullRequest
Новая
       19

Показать одно .png изображение поверх другого .jpg image

1 голос
/ 10 января 2012

У меня есть следующий код: 

<img style="background: url(./image/data/logo.png) no-repeat top right" src="./image/data/picture.jpg" />

Как и сейчас, он показывает logo.png под изображением picture.jpg. Как сделать так, чтобы оно отображалось над изображением .jpg?

Спасибо.

Ответы [ 2 ]

1 голос
/ 10 января 2012

Вы должны использовать 2 изображения для этого. Img должен быть с абсолютной позицией (той, которую вы хотите расположить над другой).
Не забывайте, что контейнер должен иметь позицию: относительную, чтобы содержать абсолютный png.
Вот пример:

http://jsfiddle.net/jNpaH/

Теги html:


image image

The styles:

.image{position:relative}
.png-over{position:absolute; top:0; left:0}

The problem with that technique is that your code becomes spammed with the image tags.
One way of solving it with jQuery is to find each div container with the class 'images' and prepend to each one the image tag.
Here is the example:
http://jsfiddle.net/jNpaH/2/

0 голосов
/ 11 января 2012

В соответствии с вашим кодом, я предполагаю, что вы предпочитаете иметь короткий HTML-код. Но невозможно получить image_tag с фоном, покрывающим его. Самый простой способ - использовать jQuery:
Это окончательный код:
http://jsfiddle.net/QyMkh/

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

<div class="image">
     <img  src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
     <img  src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
     <img  src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" /> 
</div>

Затем добавьте этот блок jQuery в html перед закрытием : 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    // store in a variable the url of the image that will be used as background
    var url = 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png';

    // select every image_tag that is children of the div with the class 'image'
    jQuery('.image img').each(function() { 
        // every child image will be wrapped inside generated divs with a class 'img-wrap'
        $(this).wrap('<div class="img-wrap"></div>'); 
    });

    // After the images are wrapped, insert the image tag that will work as background, note that instead of using the source I'm using the variable that stores it.
    $('<img src="' + url + '" class="logo" />').prependTo('.img-wrap');
</script>

Наконец добавьте эти объявления стилей, чтобы получить желаемый эффект. 

<style type="text/css">
.img-wrap{position:relative}
.img-wrap img.logo{position:absolute; top:0; left:0}
</style>

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

.img-wrap img.logo { height: 170px; left: 75px; position: absolute; top: 50px; width: 170px}

Чтобы покончить с этим, если вы хотите большей гибкости, например, не хотите, чтобы image_tags были контейнером в div, выполните следующие действия: замените эту строку блока jQuery: 

jQuery('.image img').each(function() {

с этим 

jQuery('.image').each(function() {

и добавьте class = "image" к каждому 

<img class="image">
...