Question

我正在尝试将背景图像添加到网格单元格（div元素）中，该网格单元格位于显示：网格容器（截面元素）中。我正在尝试background-image：url（“background.png”），但它无法正常工作。我不知道为什么。我已多次尝试和检查但没有用。这里需要一些帮助提前致谢

以下是HTML和CSS代码：

<!doctype HTML>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="icon" type="image/png" href="images/fav.ico" sizes="32x32" />
</head>

<body>

<section id="the-grid">
  <div id="header">
      Welcome
  </div>

  <div id="nav">
    Navigation
  </div>

  <div id="main">
    Main Content
  </div>

  <div id="footer">
    Footer
  </div>
</section>
</body>
</html>

CSS：

    /*Root Elements and Border Box Fix*/
html {
  height: 100;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body{
  font-family: "segoe ui", helvetica;
  margin: 0;
}
#the-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
  "header header header header header"
  "nav main main main main"
  "nav main main main main"
  "nav main main main main"
  "nav main main main main"
  "footer footer footer footer footer";
}

/* Grid Cells */
#header{
  background-image: url("nav.png");
  grid-area: header;
  text-align: center;
}
#nav{
  grid-area: nav;
}
#main{
  grid-area: main;
}
#footer{
  grid-area: footer;
  text-align: center;
}

Answer 1

它适用于我，但我没有使用缩短的URL背景图像。您尝试拾取的图像是否可能位于不同的目录中？

   /*Root Elements and Border Box Fix*/
html {
  height: 100;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body{
  font-family: "segoe ui", helvetica;
  margin: 0;
}
#the-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
  "header header header header header"
  "nav main main main main"
  "nav main main main main"
  "nav main main main main"
  "nav main main main main"
  "footer footer footer footer footer";
}

/* Grid Cells */
#header{
  background-image: url("https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg");
  grid-area: header;
  text-align: center;
}
#nav{
  grid-area: nav;
}
#main{
  grid-area: main;
}
#footer{
  grid-area: footer;
  text-align: center;
}

<section id="the-grid">
  <div id="header">
      Welcome
  </div>

  <div id="nav">
    Navigation
  </div>

  <div id="main">
    Main Content
  </div>

  <div id="footer">
    Footer
  </div>
</section>

如何将背景图像添加到网格单元？

1 个答案: