使用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>

海.jpg

Answer 1

在 HTML 上，您使用 class="main2" 和在 CSS 上使用 #。 您應該更改 css .main1{}