如何在网格中设置背景图片？

Question

我正在研究示例博客设计，并尝试学习 css 和 html 使用 flex 和网格。我正在尝试将背景图像设置为网格 1,3,5 。我尝试提供 class 并添加带有图像的 url 但无法执行。我已经提供了我的代码供您参考。这是个愚蠢的问题，但有了网格我无法得到它.. 码笔link：code pen link

我试过这样的方法：

.bg{
  background: url(1.jpg);
}

试图将此 bg class 分配给 div 但没有成功。我尝试从内部网格中删除背景颜色，但没有用。 CSS :

html {
    height: 100%;
  }
  
  body {
    height: 100%;
    margin: 0;
    font-family: sans-serif;
    background-color: seashell;
  }
  
  #page {
    display: flex; /*display:flex; not flexbox */
    height: calc( 100vh - 30px);
    flex-direction: row; /* Change flex-direction to column*/
  }

  #sidebar {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    width: 100px;
  }
  
  #content{
  flex:1;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: auto;
  background-color: #2196F3;
  padding:10px;
 }
  
 #inner-grid{
     flex:1;
     display : grid ;
     grid-template-rows:2fr 2fr;
     grid-gap:5px;
 }

 #inner-grid > div {
    background: lightgreen;
    padding: 8px;
    border: black;
  }
  .one {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
    display: grid;
  }
 .bg{
     background-image: url(/image1.jpg);
     border: crimson;
     display: grid;
 }
  .two {
    background-color: blue;
  }
  
  .three {
    background-color: purple;
  }
  
  .box {
    background-color: #444;
    grid-template-rows: 5;
    grid-template-columns: 10;
    color: #fff;
    border-radius: 5px;
    padding: 30px;
    font-size: 150%;
  }
  
  .nav-list {
    background: #5bb1f9;
    box-shadow: 0px 0px 10px var(--clr-gray200);
    padding: 1rem 0;
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    align-items: baseline;
  }
  
  .nav-item {
    list-style: none;
    margin-right: 2rem;
    text-align: center;
  }
  
  .nav-item a {
    text-decoration: none;
    color: black;
    transition: all 200ms ease-in;
    text-align: center;
  }
  
  .nav-item a:hover {
    color: var(--clr-primary-dark);
  }

Html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Blog Post</title>
    <link rel="stylesheet" href="common.css">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>

    <style>
  
    </style>
  </head>
  <body>

    <div id="header">
      <navbar>
        <ul class="nav-list">
          <li class="nav-item">
            <a 
              href="https://twitter.com/share?ref_src=twsrc%5Etfw" 
              class="twitter-share-button" 
              data-show-count="false"
            >Tweet</a>
            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
          </li>
          <li class="nav-item">
            <script src="https://platform.linkedin.com/in.js" type="text/javascript">
              lang: en_US
            </script>
            <script type="IN/Share" data-url="https://www.linkedin.com"></script>
          </li>
          <li class="nav-item"><a href="#">Home</a></li>
          <li class="nav-item"><a href="#">Article</a></li>
          <li class="nav-item"><a href="#">Article</a></li>
          <li class="nav-item">Login</li>
        </ul>
      </navbar>
    </div>
    
    <div id="page">
      <div id="sidebar">
        <div>
          My profile
        </div>
        <div>
          My interest
        </div>
      </div>
      <div id="content">
        <div class="one">
          <div id="inner-grid">
            <div>1</div>
            <div>2</div>
        </div>
        </div>
        <div class="one">
          <div id="inner-grid">
            <div>3</div>
            <div>4</div>
        </div>
        </div>
        <div class="one">
          <div id="inner-grid">
            <div>5</div>
            <div>6</div>
        </div>
        </div>
      </div>
    </div>
    <div id="footer">
      <navbar>
          <ul class="nav-list">
              <li class="nav-item"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
              </li>
               <li class="nav-item">   <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
                <script type="IN/Share" data-url="https://www.linkedin.com"></script></li>
              <li class="nav-item"><a href="#">footer 1</a></li>
              <li class="nav-item"><a href="#">footer 2</a></li>
              <li class="nav-item"><a href="#">footer 3</a></li>
              </ul>
      </navbar>
    </div>
  </body>
  </html>

Answer 1

将 bg class 分配给 div(1 , 3, 5) 并从内部网格中删除背景色 :)

html {
    height: 100%;
  }
  
  body {
    height: 100%;
    margin: 0;
    font-family: sans-serif;
    background-color: seashell;
  }
  
  #page {
    display: flex; /*display:flex; not flexbox */
    height: calc( 100vh - 30px);
    flex-direction: row; /* Change flex-direction to column*/
  }

  #sidebar {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    width: 100px;
  }
  
  #content{
  flex:1;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: auto;
  background-color: #2196F3;
  padding:10px;
 }
  
 #inner-grid{
     flex:1;
     display : grid ;
     grid-template-rows:2fr 2fr;
     grid-gap:5px;
 }

 #inner-grid > div {
    /*background: lightgreen;*/
    padding: 8px;
    border: black;
  }
  .one {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
    display: grid;
  }
 .bg{
     background-image: url('https://picsum.photos/200/300') !important;
      background-repeat: no-repeat;
  background-size: cover;
     border: crimson;
     display: grid !important;
 }
  .two {
    background-color: blue;
  }
  
  .three {
    background-color: purple;
  }
  
  .box {
    background-color: #444;
    grid-template-rows: 5;
    grid-template-columns: 10;
    color: #fff;
    border-radius: 5px;
    padding: 30px;
    font-size: 150%;
  }
  
  .nav-list {
    background: #5bb1f9;
    box-shadow: 0px 0px 10px var(--clr-gray200);
    padding: 1rem 0;
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    align-items: baseline;
  }
  
  .nav-item {
    list-style: none;
    margin-right: 2rem;
    text-align: center;
  }
  
  .nav-item a {
    text-decoration: none;
    color: black;
    transition: all 200ms ease-in;
    text-align: center;
  }
  
  .nav-item a:hover {
    color: var(--clr-primary-dark);
  }

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Blog Post</title>
    <link rel="stylesheet" href="common.css">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>

    <style>
  
    </style>
  </head>
  <body>

    <div id="header">
      <navbar>
        <ul class="nav-list">
          <li class="nav-item">
            <a 
              href="https://twitter.com/share?ref_src=twsrc%5Etfw" 
              class="twitter-share-button" 
              data-show-count="false"
            >Tweet</a>
            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
          </li>
          <li class="nav-item">
            <script src="https://platform.linkedin.com/in.js" type="text/javascript">
              lang: en_US
            </script>
            <script type="IN/Share" data-url="https://www.linkedin.com"></script>
          </li>
          <li class="nav-item"><a href="#">Home</a></li>
          <li class="nav-item"><a href="#">Article</a></li>
          <li class="nav-item"><a href="#">Article</a></li>
          <li class="nav-item">Login</li>
        </ul>
      </navbar>
    </div>
    
    <div id="page">
      <div id="sidebar">
        <div>
          My profile
        </div>
        <div>
          My interest
        </div>
      </div>
      <div id="content">
        <div class="one">
          <div id="inner-grid">
            <div class="bg">1</div>
            <div>2</div>
        </div>
        </div>
        <div class="one">
          <div id="inner-grid">
            <div class="bg">3</div>
            <div>4</div>
        </div>
        </div>
        <div class="one">
          <div id="inner-grid">
            <div class="bg">5</div>
            <div>6</div>
        </div>
        </div>
      </div>
    </div>
    <div id="footer">
      <navbar>
          <ul class="nav-list">
              <li class="nav-item"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
              </li>
               <li class="nav-item">   <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
                <script type="IN/Share" data-url="https://www.linkedin.com"></script></li>
              <li class="nav-item"><a href="#">footer 1</a></li>
              <li class="nav-item"><a href="#">footer 2</a></li>
              <li class="nav-item"><a href="#">footer 3</a></li>
              </ul>
      </navbar>
    </div>
  </body>
  </html>

如何在网格中设置背景图片？

How to set Back ground Image in the grid?

html

css

layout

flexbox