Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我出错的任何想法？

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（详细了解here}并提供width和height。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: