网页背景图失效及背景三角形实现问题求助

一、Header背景图不显示的修复步骤 #

1. 统一路径分隔符：Web标准使用/作为路径分隔符，把HTML里的\全部替换成/（比如Imagens/Logotipo.png），避免路径解析错误。
2. 给Header设置尺寸：默认情况下，Header高度由内部元素撑开，如果内部元素是定位布局，容易出现高度坍塌，导致背景图无法显示。给Header添加以下样式：

header {
    background-image: url(Imagens/Livro.png);
    min-height: 100vh; /* 确保Header有足够高度展示背景图 */
    background-repeat: no-repeat; /* 防止图片重复平铺 */
    background-size: cover; /* 让背景图适配容器大小 */
}

3. 校验文件位置：确认Imagens文件夹和HTML文件在同一目录下，Livro.png确实存在于该文件夹中，注意文件名大小写（Linux环境区分大小写）。

二、背景三角形被遮挡的解决办法 #

（注：当前代码未包含三角形元素，以下为通用解决方案）

1. 调整层级z-index：给三角形元素设置position: relative/absolute/fixed（z-index仅对定位元素生效），并设置更高的z-index值：

.triangulo { /* 替换为你的三角形类名 */
    position: relative;
    z-index: 999; /* 数值越高层级越靠前 */
}

2. 检查父元素限制：如果父元素设置了overflow: hidden，会裁剪超出部分，导致三角形被隐藏；另外如果父元素设置了z-index，子元素的层级会受父元素影响，需要调整父元素的z-index或直接让三角形脱离该父元素布局。
3. 调整HTML顺序：把三角形元素放在HTML结构的更靠后位置，默认情况下，后渲染的元素层级更高。

修改后的HTML代码 #

<body>
    <!-------------- Cabeçalho --------------->
    <header>
        <!-------------- Cabeçalho do Menu --------------->
        <!--??(Sticky)??-->
        <div class="menu">
            <h3 class="contactos">Contactos</h3>
            <img class="logo" src="Imagens/Logotipo.png">
            <div class="icone-menu">
                <div class="retangulo-longo"></div>
                <div class="retangulo-curto"></div>
                <div class="retangulo-longo"></div>
            </div>
        </div>

        <!-------------- Rosto da Página --------------->
        <div class="rosto">
            <img class="kudu" src="Imagens/Kudu.png">
            <div class="descricao">
                <h1>A LUZ E A ENERGIA</h1>
                <p class="legenda">A luz é um dos fatores ecológicos essenciais e de grande importância em todo o estudo dos ecossistemas, já que constitui a fonte principal de energia para os seres vivos. A luz visível faz parte do espectro que chega ao nosso planeta procedente do Sol. É um fator que regula a existência e os ciclos dos diversos organismos, exercendo ao mesmo tempo uma ação limitadora.</p>
            </div>
        </div>
    </header>
</body>

修改后的CSS代码 #

header {
    background-image: url(Imagens/Livro.png);
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}

header h1 {
    grid-column: span 12;
}

header .text-block {
    grid-column: span 12;
}

header .text-block a {
    vertical-align: super;
}

/* ------------------------ Grelha ------------------------ */

.grelha {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
}

/* ------------------------ Cabeçalho do Menu ------------------------ */

.menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    width: 1300px;
    margin: auto;
    position: relative;
    z-index: 10; /* 确保菜单在背景图上层 */
}

.logo {
    height: 150px;
    width: 150px;
}

.icone-menu {
    position: sticky;
    top: 20px; /* 补充top值让sticky生效 */
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4%;
}

.retangulo-longo {
    position: relative;
    width: 55px;
    height: 5px;
    background-color: black;
}
  
.retangulo-curto {
    position: relative;
    width: 30px;
    height: 5px;
    background-color: black;
}

.contactos {
    position: sticky;
    top: 20px; /* 补充top值让sticky生效 */
    margin-top: 4%;
}

/* ------------------------ Rosto da Página ------------------------ */

.rosto {
    position: relative;
    height: 1000px;
    top: 80px;
    z-index: 1; /* 确保内容在背景图上层 */
}

.kudu {
    display: block;
    margin: auto;
    width: 55%;
}

.descricao {
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
    margin-top: 5%;
}

.legenda {
    width: 800px;
    text-align: center;
}

内容的提问来源于stack exchange，提问作者Cássia Spínola