已确认图片路径正确 设置div高度仍不显示背景图的登录框开发求助

核心问题点 #

• CSS选择器语法错误：你当前编写的.loginbox-front .loginbox-back 是后代选择器，匹配规则为查找所有嵌套在.loginbox-front元素内部的.loginbox-back子元素。但实际HTML结构中两个div是平级的兄弟节点，不存在嵌套关系，因此这个选择器完全无法匹配到目标元素，对应的背景图、定位、尺寸等样式根本没有生效。
  正确的并列类选择器需要用逗号分隔、去掉类名之间的空格，写法为.loginbox-front, .loginbox-back，作用是同时选中所有带这两个类名的独立元素。
• 绝对定位元素缺失宽度设置：两个目标div设置了position: absolute后会脱离常规文档流，你只给元素设置了height: 100%，没有指定width: 100%。空的div在没有宽度规则的情况下，默认宽度会收缩为0，就算选择器匹配正确，也无法看到任何渲染内容。
• 不规范的HTML标签写法：你的HTML中给标签额外添加了闭合的</link>，link属于自闭合标签，不需要写闭合标签，虽然现代浏览器大多能容错渲染，但不符合HTML语法规范，可以直接去掉多余的闭合标签。

修正后的核心代码 #

CSS对应部分调整为：

.loginbox-front, .loginbox-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-image: linear-gradient(rgba(0,0,100,0.8), rgba(0,0,100,0.8)), url(../images/loginbox.gif);
    padding: 55px;
    box-sizing: border-box;
}

HTML的head部分调整为：

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

在确认背景图路径无误的前提下，完成以上修正后，背景图就能在div内正常渲染了。

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