divを画像の上にレンダリングする方法は？

Question

画像上にレンダリングする画像リンクの水平バーを作成するにはどうすればよいですか？このように：各アイコンは、対応するページにリダイレクトする必要があり、およびヘッダー画像自体は空白が=>私は、z-indexが必要になるとは思わないレンダリングされませんので、.SVGある

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>