CSS改變航向h1標籤爲標誌

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

線whitch應放在我的位置固定頂部的菜單之後。但是當我應用我的CSS代碼時，什麼都不顯示。

這是我如何嘗試應用CSS代碼：

#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是例如我的問題，我只能修改CSS代碼。

有沒有什麼解決辦法嗎？

來源

2016-04-03 Petr Bečka

作爲回答，您需要調整其他大小沒有大小。 https://jsfiddle.net/eoadud8r/14/ –

你檢查，如果你的圖像路徑是有效的？因爲它不是。

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; 
}

編輯

現在，如果你想要的形象是固定的，你必須添加position: fixed;並指定width和height。您還必須將padding-top添加到列表中以使其可見。

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; }

來源

2016-04-03 15:28:08

隨着獨生子女<span>設置爲display:none父<a>標籤具有零寬度和高度。您可以根據背景圖像大小手動設置width和height。

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>

來源

2016-04-03 15:30:37 Stickers

你也可以使用一個僞元素加載圖像：

#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>

來源

2016-04-03 15:46:09

從你下面的事情要做出肯定的CSS規則： -

「#header .inner h1 a」規則應該具有「height」，「width」屬性，特別是當您要使用「background」屬性顯示圖像時。
確保您聲明的圖像路徑是正確的。

#表頭。inner h1 a {
background：#eee url（'http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png'）no-repeat;
display：block;
float：left;
height：50px;
職位：固定;
width：50px;
}

這應該可以做到。

來源

2016-04-03 20:48:16

CSS改變航向h1標籤爲標誌

回答

相關問題