2016-05-14 148 views
0

我的網頁底部顯示圖像時出現問題。顯示圖像CSS

這就是我想要的東西:

Wanted

但它無法加載圖像。

這是我的代碼:

的index.html

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
     <link rel="stylesheet" type="text/css" href="css/style.scss"> 
     <title>Hello World</title> 
    </head> 
    <body> 
     <header class="header"> 
      Mon App de Météo 
     </header> 
     <section class="view"> 

     </section> 
     <nav class="nav"> 
      <a href="#home"><i class="home"></i></a> 
      <a href="#about"><i class="about"></i></a> 
     </nav> 
    </body> 
</html> 

的style.css

.header{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 60px; 
    line-height: 60px; 
    color: #FFF; 
    text-transform: uppercase; 
    text-align: center; 
    background-color: #11a7ab; 
} 

.nav{ 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 60px; 
    line-height: 60px; 
    text-align: center; 
    background-color: #4f597b; 
} 

.home{ 
    background-image: url('../img/icon/home.png'); 
    background-repeat: no-repeat; 
} 

.about{ 
    background-image: url('../img/icon/about.png'); 
    background-repeat: no-repeat; 
} 

a{ 
    display: block; 
    width: 50%; 
    float: left; 
} 

這是層級:

hierarchy

控制檯不顯示任何錯誤,這讓我想知道我做錯了什麼?

謝謝!

回答

2

如果這就是你所有的CSS,問題是空的<i>元素沒有大小,所以背景圖像有一個0x0的空間來處理。解決方案:顯式給i元素顯示圖標的大小。

+0

工作正常!我還必須添加一個'display:inline-block;' – user1885868

+2

OK。如果這樣做,你能點擊左邊的複選標記將其標記爲解決方案嗎?這樣,這個問題就不會再出現在未解決的問題列表中。 –