在#id选择器中时，背景图片不会显示，但在正文中显示

Question

我目前正在为Odin重新创建Google主页，并尝试将徽标设置为背景图片。 每当我将背景图片和URL放在CSS正文中时，徽标就会显示出来。 但是，当我然后将确切的行复制并粘贴到徽标中时，图像根本不会显示！

 * { 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> 

有什么想法我要去哪里吗？

Answer 1

锚标记中没有内容。

如果您不想在锚标签内添加任何内容，则应制作显示块并提供和高度，或者也可以使用内联块提供宽度和高度

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

Answer 2

锚（ a标签）是inline默认元素，即尺寸为自动生成的基于它的内容。 由于您的代码为空，因此没有大小，也不会呈现任何内容。

您可以将display更改为block或inline-block （在此处了解更多信息），并提供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>