跟随HTML/CSS教程编写代码时背景图片无法显示如何解决

核心问题点 #

• 选择器不匹配：你HTML里定义的是class="main"的div，CSS里写的main选择器只能匹配<main>标签，找不到对应元素，所以样式完全不生效，要改成类选择器.main
• background-image语法错误：原代码里渐变的参数不全、括号位置写错，linear-gradient(to top,)是空参数直接闭合，还把渐变和图片的层级搞混了，正确写法是把渐变的所有颜色参数放在渐变括号内，再和图片路径用逗号分隔
• CSS规则未闭合：原.main的样式代码最后缺了闭合大括号}，规则不完整也会导致失效

修复后完整CSS代码 #

* {
  margin: 0;
  padding: 0;
}
h3 { 
  color: saddlebrown;
  margin-left: 20px;
}

.main {
  width: 100%;
  background-image: linear-gradient(to top, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 50%), url(sun.jpg);
  background-position: center;
  background-size: cover;
  height: 109vh;
}

额外说明：图片的只读属性不会影响浏览器加载显示，不需要修改该属性。

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