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

Question

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

Answer 1

Создайте полупрозрачную графику PNG с символом «Воспроизведение» и нужным размером (например, 240x320).

Допустим, вы назвали его "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, вы должны быть в безопасности.

Answer 2

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

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

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

Обертка <div> необходима для того, чтобы вы могли правильно нацеливать img и span, а также иметь размеры, в которых они должны содержаться. Пролет - это то место, куда будет идти наложенное изображение.

.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;
}

(Я на самом деле не проверял это, если это явно неправильно, дайте мне знать, что я пересмотрю это!)

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

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

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

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

Answer 3

Вы найдете решение в следующей теме на StackOverflow: Как нарисовать рисунок поверх другого рисунка

Вскоре (цитата после 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 4

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

Answer 5

Взяв ваш пример с 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, а затем установите фоновое изображение в качестве большего изображения, тогда это даст эффект меньшего изображения, находящегося в центре без дополнительной разметки.