CSS Änderung h1-Tages in logo

Question

Überschrift Ich versuche, diese

<h1><a href="itw1.html"><span>FITLayout</span></a></h1>

Linie mit Logo ersetzen whitch sollte nach meinem Top-Menü mit fester Position platziert werden. Aber wenn ich meinen CSS-Code anwende, wird nichts angezeigt. Diese

ist, wie ich versuche, CSS-Code anwenden:

#header .inner h1 a { 
    float: left; 
    display: block; 
    background:url('https://www.google.cz/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiJxavlxfLLAhVBORQKHbAaB2MQjRwIBw&url=http%3A%2F%2Fdesign.ubuntu.com%2Fdownloads%3Fmetadata%3Delement-logo%2Bbrand-ubuntu&psig=AFQjCNGNBTguZJPq3hjdH5AHeMs-P7V1dQ&ust=1459775537916571') no-repeat; 
} 

#header .inner h1 span { 
    display: none; 
} 

HERE ist Beispiel für mein Problem und ich kann nur CSS-Code ändern.

Gibt es eine Lösung, bitte?

Answer 1

Haben Sie überprüft, ob Ihr Imagepfad gültig ist? Weil es nicht ist.

Check this code with a correct image path

#header .inner h1 a { 
    display: block; 
    background:url('http://lorempicsum.com/futurama/350/200/1') no-repeat; 
    width: 100%; height: 200px; 
} 

EDIT

Nun, wenn Sie das Bild fixiert werden wollen, müssen Sie position: fixed; hinzuzufügen und eine width und height angeben. Sie müssen auch ein padding-top der Liste hinzufügen, um es sichtbar zu machen.

Like this

#header .inner h1 a { 
    display: block; 
    background:url('http://lorempicsum.com/futurama/350/200/1') no-repeat; 
    height: 200px; 
    background-size: cover; 
    position: fixed; 
    left:8px; right: 0; 
} 

#menubar { padding-top: 200px; } 

Answer 2

Mit dem einzigen Kind <span> Satz display:none der Mutter <a> Tag hat null Breite und Höhe. Sie können die width und height basierend auf der Hintergrundbildgröße manuell festlegen.

h1 a { 
 
    background: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png') no-repeat; 
 
    display: block; 
 
    width: 272px; 
 
    height: 92px; 
 
} 
 
h1 a span { 
 
    display: none; 
 
}

<h1><a href="itw1.html"><span>FITLayout</span></a></h1>

Answer 3

Sie können auch ein Pseudo-Element verwenden, um das Bild zu laden:

#body { 
 
\t width: 100%; 
 
\t height: 900px; 
 
} 
 

 
#header { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
#header .inner div { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    color: white; 
 
    background-color: #5f5f5f; 
 
} 
 

 
#header .inner #topmenu .login { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    float: right; 
 
    padding-right: 20px; 
 
    padding-top: -10px; 
 
    color: white; 
 
} 
 

 
#header .inner h1 a { 
 
    float: left; 
 
    } 
 
#header .inner h1 a:before { 
 
    content:url('http://design.ubuntu.com/wp-content/uploads/ubuntu-brandmark-thumb2.png'); 
 
} 
 

 
#header .inner h1 span { 
 
    display: none; 
 
}

<div id="body"> 
 
<header id="header"> 
 
\t <div class="inner"> 
 
\t \t <h1><a href="itw1.html"><span>FITLayout</span></a></h1> 
 
\t 
 
\t \t <div id="topmenu"> 
 
\t \t  <a href="#" class="login">Login</a> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div id="social" class="icons"> 
 
\t \t \t <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a> 
 
\t \t \t <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a> 
 
\t \t \t <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a> 
 
\t \t </div> 
 
\t 
 
\t \t <nav id="menubar"> 
 
\t \t <ul id="menu"> 
 
\t \t  <li class="dropdown"><a href="#">Company</a></li> 
 
\t \t  <li class="selected dropdown"><a href="#">Products</a></li> 
 
\t \t  <li class="dropdown"><a href="#">News</a></li> 
 
\t \t  <li class="dropdown"><a href="#">Downloads</a></li> 
 
\t \t  <li><a href="#">Contact</a></li> 
 
\t \t </ul> 
 
\t \t </nav> 
 
\t </div> 
 
</header> 
 
</div>

Answer 4

Von den CSS-Regeln, die Sie folgende Dinge sind sicher gemacht werden : -

1. Die Regel "#header .inner h1 a" sollte eine Eigenschaft "height", "width" haben, insbesondere wenn Sie ein Bild mit dem Attribut "background" anzeigen möchten.

2. Vergewissern Sie sich, dass der von Ihnen angegebene Bildpfad korrekt ist.

# Kopfzeile.inner h1 a {
Hintergrund: #eee url ('http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png') keine Wiederholung;
Anzeige: Block;
Schwimmer: links;
Höhe: 50px;
Position: fixiert;
Breite: 50px;
}

Dies sollte den Trick tun.