如何让div在图像上渲染？

Question

如何制作水平条形图链接以在图像上渲染？像这样：

每个图标都应重定向到相应的页面，标题图像本身为.svg，因此空格不会呈现=＆gt;我不认为z-index是必要的

Answer 1

我认为你打算做的是将链接放在背景图像的顶部。 所以我准备了这个小例子。

此外，当用户悬停他将理解可点击的图标时，添加某种视觉反馈是个好主意：）

.background {
  position: relative;
}
.links {
  position: absolute;
  list-style-type: none;
  bottom: 30px;
  left: 50px;
}
.links li {
  display: inline;
}
a {
  text-decoration: none;
}
a img {
  padding: 0 15px;
}
a:hover img {
  transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
}

<div class="background">
  <img src="http://rockstartemplate.com/blogheaders/bannerdesign1.jpg">

  <ul class="links">
    <li>
      <a href="www.twitter.com">
        <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-48.png">
      </a>
    </li>
    <li>
      <a href="www.facebook.com">
        <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-48.png">
      </a>
    </li>
    <li>
      <a href="www.youtube.com">
        <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-48.png">
      </a>
    </li>
  </ul>
</div>