Wie kann ich eine horizontale Leiste mit Bildverknüpfungen erstellen, um sie über ein Bild zu rendern? Wie folgt aus: 
Wie man div erhält, um oben auf einem Bild zu übertragen?
Jedes Symbol auf seine entsprechende Seite umleiten soll, und die Header-Bild selbst ist ein .svg so Leerzeichen machen nicht => Ich glaube nicht, z-index notwendig sein wird,
Was ich denke, dass Sie vorhatten, ist, die Verbindungen über dem Hintergrundbild zu positionieren. Also habe ich dieses kleine Beispiel vorbereitet.
Außerdem ist es eine gute Idee, eine Art visuelles Feedback hinzufügen, wenn der Benutzer die Symbole schwebt, dass er versteht, dass sie anklickbar sind :)
.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>
nur den Code schreiben was auch immer Sie haben versucht – Alok
Fragen, die Code Hilfe suchen, müssen den kürzesten Code enthalten, der notwendig ist, um ihn ** in der Frage selbst zu reproduzieren ** vorzugsweise in einem [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/Einführung-Runnable-JavaScript-CSS-und-HTML-Code-Snippets /). Siehe [** So erstellen Sie ein minimales, vollständiges und überprüfbares Beispiel **] (http://stackoverflow.com/help/mcve) –