使用HTML和CSS设置网页背景时出现空白页面问题求助

核心错误：渐变语法使用错误 #

你把背景图片的url()嵌套进了linear-gradient()的参数里，这是不符合CSS语法的——linear-gradient()仅接受颜色值作为渐变节点，不能直接放入图片路径。这会导致整个background-image属性失效，所以页面显示空白。

修正后的代码 #

*{
  margin: 0;
  padding: 0;
}

.header{
  min-height: 100vh;
  width: 100%;
  /* 渐变层与背景图用逗号分隔，渐变会叠加在图片上方 */
  background-image: linear-gradient(rgba(4,9,30, 0.7), rgba(4,9,30, 0.7)), url(images/banner.png);
  background-position: center;
  background-size: cover;
  position: relative;
}

如果想要渐变从半透明深色过渡到透明（让图片下方区域更清晰），可以调整渐变参数：

background-image: linear-gradient(rgba(4,9,30, 0.7), transparent), url(images/banner.png);

额外排查点 #

• 确认文件名与路径无问题：检查banner.png的大小写是否和代码一致（Linux/macOS系统区分文件名大小写），同时确保图片确实放在CSS文件同级的images文件夹内。
• 验证图片可用性：直接在浏览器地址栏输入图片的完整访问路径（本地环境类似http://localhost:xxxx/images/banner.png），确认图片能正常加载，排除图片损坏或服务器配置问题。

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