使用 html 和 css 在网格中输入背景图像

Question

我正在尝试将背景图像放在我的一个柱状网格中，但它不会显示我试图拉伸它，但它看起来不太好。我不知道缺少什么，或者是否有不应该存在的代码。我查看了每个论坛，但没有与我的问题相关的具体答案或问题。

    body {
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: 10vw 50vw 50vw 50vw 50vw 7vw;
      grid-gap: .5em;
      margin: 0;
      padding: 0;

      
    }

    header,
    footer {
      grid-column: 1 / span 2;
    }

    main {
      grid-column: 1 / span 2;
      grid-column: 1 / span 2;
      grid-column: 1 / span 2;
      grid-column: 1 / span 2;
      
    }

    #main1 {
    	background: url("Pics&Video/Sea.jpg") no-repeat center;
    	background-size: contain;
    	
    	
    }


    body {
      margin: 0 auto;
      max-width: 80em;
      padding: 1em 0;
    }

    header,
    main,
    aside,
    footer {
      background: #eaeaea;
      display: flex;
      align-items: center;
      justify-content: center;
    }

<header>
    		Header
    	</header>
    	
    	<main class="main1"> 
    		Main
    	</main >
    	<main class="main2">
    		main
    	</main>
    	<main class="main3">
    		Main
    	</main>
    	<main class="main4">
    		main
    	</main>

    	<footer>
    		Footer
    	</footer>

Sea.jpg

Answer 1

在 HTML 上使用 class="main2" αnd 在 CSS 上使用 #。您应该更改 css .main1{}