本地编写的HTML与CSS页面在Chrome浏览器加载异常仅部分内容可见

核心原因是你代码中使用了/开头的绝对根路径引入图片，不同浏览器对本地路径的解析规则存在差异：

• 若你直接双击HTML文件通过file:///本地文件协议打开页面：Edge会默认将HTML文件所在的文件夹作为根目录解析路径，能正常找到对应目录下的图片；但Chrome在本地文件协议下，会将/开头的路径解析到磁盘根目录，自然无法找到存放在项目文件夹内的图片资源，控制台就会报文件找不到的错误。
• 若你是通过本地开发服务（如http://localhost形式）打开页面出现该问题，大概率是文件名大小写不匹配导致：Chrome对URL大小写敏感，而Edge在Windows环境下默认不区分路径大小写，就会出现Edge加载正常Chrome加载失败的情况。

方案1：改用相对路径（通用兼容方案） #

所有url()内的路径都改用相对路径规则编写，如果你的HTML文件和images文件夹处于同一级目录，将路径开头的/替换为./即可，./代表当前HTML文件所在的目录，所有浏览器和运行环境都会按统一规则解析。
修改后的代码示例：

HTML代码 #

<section name="second-sec" id="second-section" style="z-index: 0;">
        <div class="grid" title="steak" style="background-image: url(./images/steak.jpg);"></div>
        <div class="grid" title="falafel" style="background-image:url(./images/falafel.jpg);"></div>
        <div class="grid" title="soup" style="background-image:url(./images/soup.jpg);"></div>
        <div class="grid" title="sniztel" style="background-image:url(./images/shniztel.jpg);"></div>
    </section>

CSS代码 #

#second-section {
    background-image: url("./images/wood-pic.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin-left:15px;
    margin-right: 15px;
    height: 10000px;
}
.grid {
    display:inline-block;
    background-size: cover;
    height:400px;
    width:100%;
    background-position:center;
    margin-bottom:-3.5px;
}
.grid:hover {
    border: 1.5px solid #adacac;
    box-shadow: 0px 0px 20px black;
}

方案2：修正大小写匹配（本地服务场景适用） #

如果使用本地开发服务运行项目，逐一核对代码中写的文件名、文件夹名大小写，和实际本地存储的文件大小写完全保持一致即可。

内容的提问来源于stack exchange，提问作者asaf davidovitch