背景圖片不會在#id選擇器中顯示，但會顯示在正文中

我目前正在爲Odin重新創建Google主頁並嘗試將徽標設置爲背景圖片。每當我將背景圖片和URL放入CSS的正文中時，徽標就會顯示出來。但是當我複製並粘貼到徽標的確切線條時，圖像根本不顯示！背景圖片不會在#id選擇器中顯示，但會顯示在正文中

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#logo { 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png"); 
 
    background-size: 272px 92px; 
 
    background-repeat: no-repeat; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
    <title>Google</title> 
 
</head> 
 

 
<body> 
 
    <div class="main"> 
 
    <a href="www.google.co.uk" id="logo"></a> 
 
    </div> 
 
</body> 
 

 
</html>

我要去的地方錯了任何想法？

來源

2017-02-02 nicky heise

''是空的，所以它具有零寬度和零高度。 – Turnip

我曾嘗試添加一個高度和寬度的身份證，但它沒有區別？ –

這是因爲''標籤是內聯元素。您無法設置高度或寬度。他們從內容中獲得他們的維度。添加'#logo {display：block; }'你可以設置高度和寬度。 – Turnip

錨標記中沒有內容。

如果你不想給錨標記內的任何內容，你應該讓顯示塊，並提供和高度或者你也可以使用inline-block的提供的寬度和高度

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
    <title>Google</title> 
    </head> 
    <body> 
     <div class="main"> 
      <a href="www.google.co.uk" id="logo"></a> 
     </div> 
    </body> 
</html> 



* { 
    padding: 0; 
    margin: 0; 
    border: 0; 
    box-sizing: border-box; 
} 

body { 
    width: 100%; 
    height: 100%; 
} 

#logo { 
    background: url("imgs/google-logo.png"); 
    background-size: 272px 92px; 
    background-repeat: no-repeat; 
    display: block; 
    height: 300px; 
}

來源

2017-02-02 11:53:47 Pradeep

這裏我們可以將'height'設置爲'background-size：'height'像設置'height：92px;'我們不會與下一個'elements'對齊（位置）混淆。 –

錨（ a標籤）默認爲inline元素，即大小是根據其內容自動生成的。由於您的標籤爲空，因此沒有尺寸並且沒有任何呈現。

您可以更改display到block或inline-block（閱讀更多有關兩者here），並提供width和height。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#logo { 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png"); 
 
    background-size: 272px 92px; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
    width: 272px; 
 
    height: 92px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
    <title>Google</title> 
 
</head> 
 

 
<body> 
 
    <div class="main"> 
 
    <a href="http://www.google.co.uk" id="logo"></a> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-02-02 12:07:30

背景圖片不會在#id選擇器中顯示，但會顯示在正文中

回答

相關問題