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

Ответ 1

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

Сделайте графику 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, вы должны быть в безопасности.

Ответ 2

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

Во всяком случае, точно, как это делается, во многом зависит дизайн, который вы хотите достичь. Предположим, что вы хотите достичь стиля 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;
}

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

Это предполагает пару вещей:

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

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

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

Ответ 3

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

Ответ 4

Вы найдете решение в следующем потоке в 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>

Подробнее о том, почему и как это работает в исходном потоке.

Ответ 5

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