html - 在调整横幅上设置链接

Question

我想在横幅上设置一个根据屏幕宽度调整大小的链接。

现在我已经给出了完整图像的链接，例如 this .

我只希望“在此处查找”按钮区域可点击。

代码

<div class="outer">
  <a href="http://google.com/" >
    <img src="http://s11.postimg.org/damg257c3/test.jpg" alt="" />
  </a>
</div>

Answer 1

你可以试试this .

设置 position: absolute 并在 % 中设置 left top 到 link

为了便于理解，我将 opacity: 0.5; 设置为 link

HTML

<div class="outer">
    <img src="http://s11.postimg.org/damg257c3/test.jpg" alt="" />
  <a class="link" href="http://google.com/" ></a>
</div>

CSS

* {
  margin: 0;
}
img {
  max-width: 100%
}
.outer {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.link {
  background: red;
    display: block;
    height: 12%;
    left: 24%;
    opacity: 0.5;

    position: absolute;
    top: 81%;
    width: 17%;
}