如何让div在图像上呈现？

Question

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

每个图标应该重定向到其相应的页面，标题图片本身是一个.SVG所以空格不会呈现=>我不认为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>