Как разместить изображение над другим?

Question

Как разместить изображение поверх другого большего изображения, например, на YouTube, кнопка воспроизведения отображается поверх миниатюры видео?

Answer 1

Если у вас есть хороший контроль над размером изображения, мы использовали фон для различных элементов - например, установите фон ячейки таблицы на одно изображение и поместите вкладку img внутри ячейки.

Answer 2

Я не уверен, что YouTube использует изображения для этого эффекта, разве это еще не проигрыватель Flash?

Во всяком случае, точно, как это делается, во многом зависит дизайн, которого вы хотите достичь. Предположим, что вы хотите достичь стиля YouTube, где у вас есть уменьшенное изображение, и хотите наложить изображение кнопки воспроизведения сверху. Если вы хотите картинку, чтобы быть фактическим <img> тега вам потребуется некоторая дополнительная разметка, как это:

<div class="thumb-wrapper"> 
<img src="mythumbnail.gif" alt="my awesome video" /><span></span> 
</div> 

Обертка <div> требуется, так что вы можете настроить таргетинг на IMG и диапазон правильно, и имеют размеры, чтобы содержать их в Пролет, где будет отображаться оверлейное изображение.

.thumb-wrapper { 
position:relative; 
} 

.thumbwrapper span { 
position:absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 100%; 
z-index: 100; 
background: transparent url(overlay.png) no-repeat; 
} 

(я на самом деле не проверял это, если его blatently неправильно, дайте мне знать, я буду пересматривать его!)

Это предполагает несколько вещей:

1. Ваши эскизы всегда фиксированный размер и накладываемое изображение совпадает с
2. Вашего наложенного изображения представляет собой полупрозрачный PNG

Вы также можете использовать стиль opacity: для достижения # 2. Конечно, IE6 будет заворачивать свою уродливую голову, и вам понадобится использовать для нее PNG-исправление, если вы собираетесь использовать прозрачный маршрут изображения или отдельный фильтр непрозрачности при использовании этого метода. Оба эти вопроса, несомненно, были отвечены в другом месте в Stack Overflow или легко доступны для Google.

Если у вас есть другие требования, возможно, это будет возможно без дополнительной разметки, поскольку я сказал, что все зависит от того, что вам нужно в точности. Некоторые требования могут быть невозможны без JavaScript (что, конечно же, означало бы, что вы могли бы добавить любую дополнительную разметку!).

Answer 3

Берем пример YouTube, вы можете очень легко сделать это с 2-мя изображениями и 1 IMG тега и немного CSS конечно;)

<style> 
    img.youtube { 
     width:500px; height:500px; 
     margin:0; padding:0; 
     background:transparent url(/point/to/your/larger/image.jpg) no-repeat center 
    } 
</style> 

<img src="/point/to/youtube/play/image.png" alt="Gotta have alt text ;)" border="0" class="youtube" /> 

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

Answer 4

Вы найдете решение в следующей теме на StackOverflow: How to draw a graphic over another graphic

Вскоре (цитирую после Ipsquiggle):

<div style="position:relative"> 
    <div> 
    <img url="backgroundimg.png"> 
    </div> 
    <div style="position:absolute; left:0; top:0;"> 
    <a href="foo.html"><img url="smallgraphic.png"></a> 
    </div> 
</div> 

Более подробную информацию, почему и как это работает в оригинальной теме.

Answer 5

Все ответы здесь слишком сложны.

Сделайте PNG графический, полупрозрачный, с символом, который, как представляется, указывает «играть». Сделайте это размером, который вам нужен, может быть, графикой 320x240 или нет. Допустим, вы назвали его «overlay.png»

Скажем YouTube генерируется эскиз на http://img.ytimg.com/abcdefg/0.jpg

Теперь все, что вам нужно в коде это:

<a href="destination_of_your_link"><img src="overlay.png" width="320" height="240" border="0" style="background:URL(http://img.ytimg.com/abcdefg/0.jpg) center center black;" /></a>

Пока ваш целевая аудитория пока не использует IE6, вы должны быть в безопасности.