html - 如何使用 dotnetnuke 在图像上叠加 anchor

Question

我正在尝试编辑 DotNetNuke 网页，并且有一张图片需要显示。在图像的顶部，我想放置一个 anchor 。问题是我不希望整个图像都可以点击，只是 anchor ，而且我似乎无法让它工作。

此外，因为它是一个 DNN 站点，我不确定我是否可以编辑 CSS，所以我希望有一个纯 html 的解决方案。我尝试了各种组合，但似乎都不起作用。谢谢

下面是我的测试 html:

<div class="c_head h2_title_container">
    <img alt="" width="600" height="151" style="width: 356px; height: 101px;" src="/portals/224/img/blue-arrow-small.png"></img><span style="font-size:     18px;"><a href="mailto:email@email.net?" target="_top"><strong>Name Goes Here</strong></a></span>

    <br></br>

    <p class="team_bio" style="text-align: justify;"><span style="font-size: 16px;">Here is my test text.</span>
    </p>
</div>

Answer 1

您应该能够将父元素设置为position: relative，然后添加绝对定位的 anchor 的父元素:

<div class="c_head h2_title_container" style="position: relative;">
    <img ...></img>

    <div style="... position: absolute; top: 20px; left: 30px;">
        <a href="..." target="_top">...</a>
    </div>

    ...
</div>