CSS设置background-image路径正确但背景图片无法显示问题求助

问题原因及修复方案 #

1. CSS语法错误（核心原因） #

你的background-image属性里，linear-gradient的闭合括号位置写错了，你把背景图片的url()参数错误包进了渐变函数的括号内，正确的写法是渐变和背景图作为两个独立参数，用逗号分隔。

2. 文件名不匹配 #

你的项目目录里images文件夹下的图片名称是imagen.jpg，但你CSS里写的是fondo-inicio.jpg，文件名不一致导致资源找不到。

3. 可选修复：HTML标签闭合错误 #

你的HTML代码里第二个<main>标签没有闭合，应该改为</main>，避免渲染异常。

修正后的完整代码 #

修正后的CSS代码： #

.resumen{
    height: 50vh;
    background-image: linear-gradient(to top, rgba(161, 140, 209, 0.5) 0%, rgba(251, 194, 235, 0.5) 100%), url(../images/imagen.jpg);
}

修正后的HTML代码（仅修复闭合问题）： #

<body>
    <main>
        <section class="resumen" id="inicio">
            <h2>图片应该显示在这段文字的后方</h2>
        </section>
    </main>
</body>

内容的提问来源于stack exchange，提问作者Diego Donoso