Нарисуйте ссылку и рисунок поверх другого рисунка

Question

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

Answer 1

Примерно так будет работать (рекомендуем переместить встроенный CSS в таблицу стилей, конечно):

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

position:absolute поместит этот div относительно контейнера с установленным position, в данном случае слева 0 сверху 0. Это означает, что он окажется в верхнем левом углу того же элемента, что и backgroundimg находится в.

Имеет ли это смысл?

Answer 2

Не используйте больше div, чем вам нужно.

<div style="position: relative;">
  <a style="position: absolute; top: 0; left: 0;">
    <img src="..." />
  </a>
  <img src="..." />
</div>

Answer 3

упростить:

<div style="background:url(yourimage.jpg); position:relative;">
<div style="position:absolute; left:0; top:0;">
         <a href="somewhere.html"><img src="inner.jpg"></a>
    </div>
</div>

или

<div style="background:url(yourimage.jpg); position:relative;">
  <a href="somewhere.html"><img src ="innerimage.jpg" style="position:absolute; left:0; top:0;"/></a>
</div>

или

    <div style="background:url(yourimage.jpg); position:relative;">
      <a href="somewhere.html" style="position:absolute; left:0; 
top:0;display:block;width:100px;height:100px;"></a>
    </div>