如何使用html+css使背景图片全屏显示

Question

我正在处理一个 html+css 文件，我想在 HTML 和 CSS 中创建全屏背景图像，我已经设置了背景图像的所有属性。 我希望该背景图像在设备上全屏显示并且不在背景图像上滚动，所以我尝试这样做：

 * { margin: 0; padding: 0; }.background-image { position: relative; } img { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; position: fixed; height: 100%; width: 100%; } </style>

 <div class="background-image"> </div>

我设置背景图像 position 相对和 img position 固定为固定而不滚动但它带来背景图像也被拉伸文本？ 任何想法来修复它？

Answer 1

如果你想要背景图像，请使用创建一个容器，并使用 css 将背景图像属性添加到容器中：url('the path of my img')

我可以给你的一些建议是：

图片

• 如果您希望人们打印页面并且您希望默认包含图像，请使用 IMG。

• 如果您希望浏览器显示与文本大小成比例的图像，请使用 IMG。

• 使用 IMG 而不是 background-image 可以极大地提高背景动画的性能。

css 背景图像

• 如果图像不是内容的一部分，请使用 CSS 背景图像。

• 当图像替换文本时使用 CSS background-image

• 使用 CSS background-image 结合 CSS background-size:cover 以拉伸背景图像以覆盖整个容器

• 如果您希望人们打印页面并且您不希望默认包含图像，请使用 CSS 背景图像。

Answer 2

使用 object-fit 属性和 object-position 属性。 在这里你实际上并没有在后台工作。 图像是元素而不是背景。 要使其成为背景，您必须使用图像的 URL。