CSS背景图片无法显示求助：图片在HTML中可正常加载

AI 小北

2026-6-28

问题：CSS伪元素背景图不显示，但HTML直接插入图片正常

我想给文本添加一张背景图并置于文本后方，尝试通过CSS设置时图片无法显示，但在HTML中直接添加图片却能正常显示。图片路径与HTML、CSS文件处于同一目录，这是我的第一个Web开发项目，恳请告知问题所在或提供帮助。

我的HTML代码

<main>
        <section class="fullpage" id="journey">Journey of Mine</section>
            
        <p>Copyright © Amadeus Gavriel Tataming. 2024</p>
    </main>

我的CSS代码

.fullpage {
    position: relative; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    height: 100vh; 
    font-size: 2em; 
    color: #333;
}

.fullpage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('humanoid-robot.png');
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    z-index: -1;
}

可能的问题及解决方法

确认CSS文件是否正确引入：如果你的CSS是外部文件，检查HTML头部有没有添加<link rel="stylesheet" href="你的CSS文件名.css">，路径写错的话CSS不会生效，伪元素自然看不到背景图。
检查图片文件名的大小写：部分系统（比如Linux、macOS）对文件名大小写敏感，确保humanoid-robot.png和实际文件名完全一致，包括大小写。
修正CSS中的content属性：如果CSS是外部文件，直接写content: ""即可，不要用HTML转义的"（如果是写在HTML的<style>标签里则没问题，但外部CSS文件不需要转义）。
尝试明确相对路径：把url('humanoid-robot.png')改成url('./humanoid-robot.png')，明确指定当前目录，避免路径解析出错。
强制刷新浏览器缓存：按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新页面，排除旧缓存导致的CSS不更新问题。
检查层级覆盖：确认父元素的父级（比如<main>）没有设置背景色，如果有会覆盖伪元素的背景图，可给<main>添加background: transparent确保透明。