是图像文件问题还是大小问题？ HTML CSS 背景图片问题答案

【问题标题】：Is it an image file issue or size issue? HTML CSS background image question是图像文件问题还是大小问题？ HTML CSS 背景图片问题
【发布时间】：2020-11-25 19:27:17
【问题描述】：

我一直在尝试使用不同的图像作为背景，但到目前为止我很不幸地确定这是照片文件大小的问题还是我使用的图片有问题？询问，因为我尝试使用一张图像并且背景图像显示并且可以工作，但是即使我已经多次查看我的代码并且它是正确的，我想要使用的任何其他图片都不会显示或正常工作。这是我当前的代码

<!DOCTYPE html>
<html>
    <head>
        <title>Winston Berz</title>
        <style>
            body {
                background-image: url("C:\Users\apere\OneDrive\Desktop\HTML Progress\Winston Berz\All Photos\img5.jpg") no-repeat center center fixed;
                min-height: 100%;
                background-size: 100%;
            }
        </style>
    </head>
    <body>
        <div id="Navbar">
            <nav>
                <a href="Main P.html">Main</a>
                <a href="About me P.html">About Me</a>
                <a href="Contact P.html">Contact</a>
                <a href="Photos P.html">Photos</a>
            </nav>
        </div>
        <div id="Main Title">
            <header>
                <h1>Winston Berz</h1>
            </header>

    </body>
</html>

还想指出，我也使用了单独的 css 文档并得到了相同的结果，所以这次我求助于内部 css。帮助！请，谢谢你，我对编码还是比较陌生。

【问题讨论】：

旁注：您的<div id="Main Title"> 未关闭
只是为了进行完整性检查，您尝试的其他图像是否在同一目录中？
是的，我将所有我想使用的照片文件放在一个文件夹中，但最终工作的图片文件在我电脑的我的图片文件夹中
这可能只是您无法使用的图像的路径问题。您可以在本地文件夹中再放几张图片并尝试一下吗？如果它们也在工作，则可能与您的图像主机或图像路径有关。
Chrome 出于安全原因阻止本地文件访问。尝试使用相对路径

标签： html css image background jpeg

【解决方案1】：

您可以尝试清除浏览器缓存（here 是这样），也许浏览器正在存储以前的图像。

另外，您可以考虑创建一个<div> 并将您的背景图片放在那里，而不是将图片设置在 css 中。

您可以在<body> 标签内添加

<div class="background-images-wrapper">
<img src="image/link/path" alt="background1"><img>
</div>

然后在你的 CSS 样式表中添加这个

.background-images-wrapper{
  height: 100%;
  width: 100%:
  object-fit: cover;
  z-index: -1;

z-index: -1 是为了确保您的图像始终位于其他元素之后

【讨论】：