html - 使用 Display :Block property 在图像上显示按钮

Question

我使用这段 CSS 代码在页面中央显示了一张图片:

      .img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        position:relative;
         }

      .btn{
       position:absolute;
       margin-top:10%;
       margin-left:-27%;
         }

HTML:

    <img src="12345.png" class="img"></img>
        <a href="http://google.ro"><img src="pin.png" class='btn' width="30px" height="48px" alt="http://google.ro" ></img><a>
        <a href="http://google.ro"><img src="pin.png" class='btn1' width="30px" height="48px" alt="http://google.ro" ></img><a>
        <a href="http://google.ro"><img src="pin.png" class='btn2' width="30px" height="48px" alt="http://google.ro" ></img><a>

如何让同样是图像的 3 个标签显示在图像上？在我添加 display:block 之前它工作得很好。

Answer 1

<div style="position:relative">
<img src="12345.png" class="img"></img>
<div style="position:absolute">

        <a href="http://google.ro"><img src="pin.png" class='btn' width="30px" height="48px" alt="http://google.ro" ></img><a>
        <a href="http://google.ro"><img src="pin.png" class='btn1' width="30px" height="48px" alt="http://google.ro" ></img><a>
        <a href="http://google.ro"><img src="pin.png" class='btn2' width="30px" height="48px" alt="http://google.ro" ></img><a>

</div>


</div>

试试这个......会帮助你更好......