html - css 背景图像显示在我的其他代码前面

Question

我的背景图片一直出现在所有内容的前面。当然我只是希望它成为背景...

我已经尝试在我的 HTML 文件和 CSS 文件中设置背景图片。两者都在我的文本和导航栏的前面。

<img src="img/homepage.jpg" id="bg" alt="oops">

*,
*::before,
*::after {
box-sizing: border-box;
}

:root{
    --bg-color: #D8D8D8;
}

body {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
width: 100vw;
height: 100vh;
color: #000;
font-family: 'Maitree', serif;
}
#bg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%; 
}

我想要我的照片作为背景。

Answer 1

你很幸运，css 有你需要的东西，background-image 属性。您选择要具有背景的元素，然后使用 css 设置图像。

如果您希望它位于整个body 的后面，那么您可以尝试:

body {
  background-image: url('img/homepage.jpg'); // make sure this path is relative
  background-size: cover; // cover is a good option here, but you might want something else
}

查看 https://developer.mozilla.org/en-US/docs/Web/CSS/background因为您可以对背景做很多事情，包括定位、更改大小、重复等等。