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

【问题标题】：how to add background image to a grid cell?如何将背景图像添加到网格单元格？
【发布时间】：2017-09-08 19:52:33
【问题描述】：

我正在尝试将背景图像添加到 display:grid container (a section element) 中的网格单元格（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;
}

【问题讨论】：

请添加您尝试过的代码。如果我们能重现问题，这会有所帮助。
我刚刚打破了我的水晶球 :)，没有代码显示您的问题 = 没有帮助 :(
background-image 正在工作...见this
@kukkuz 我看过了。不工作

标签： css css-grid

【解决方案1】：

设置后备颜色，所以如果您的背景图片不可访问/url错误，那么回调颜色将自动显示为背景。如果浏览器不支持背景图像或 url，这也很好，它会自动将后备颜色分配为背景颜色。正如我在代码中显示的那样并检查 CSS 部分 #header、#nav、#main。

/*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: url("nav.png") green;
  grid-area: header;
  text-align: center;
}
#nav{
  grid-area: nav;
  background: url("https://pure.wallpapergk.com/download/smiley_curly_hair_blue_eyes_cute_girl_in_blur_background_wearing_yellow_dress_cute.jpg") yellow;
  background-repeat: no-repeat;
  background-size: cover;
}
#main{
  grid-area: main;
  background: url("https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero.jpg") blue;
  color:white;
}
#footer{
  grid-area: footer;
  text-align: center;
}

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

【讨论】：

【解决方案2】：

它对我有用，但我没有使用缩短的 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>

【讨论】：