Neocities页面背景图片无法显示问题排查求助

问题情况 #

我在设计Neocities站点的spitbucket.html页面时，背景图片始终无法显示，尝试了HTML内联样式和两种CSS写法都没效果：

• 最初的内联样式代码：

<style> 
  background-image: "url(https://www.google.com/url?sa=i&url=https%3A%2F%2Fpngtree.com%2Ffree-backgrounds-photos%2Fabstract-lines&psig=AOvVaw0DqRellrv87omUXChv5XUF&ust=1670010209669000&source=images&cd=vfe&ved=0CA8QjRxqFwoTCOia0u2x2fsCFQAAAAAdAAAAABAU)"; 
</style>

• 第一种CSS写法：

.body { 
  text-align: center; 
  background-image: url(https://us.123rf.com/450wm/leavector/leavector1901/leavector190100001/leavector190100001.jpg?ver=6); 
}
.square { 
  text-align: center; 
  background-color: #16a868; 
  line-height: 70px; 
  width: 400px; 
  height: 800px; 
  color: #701ba1; 
  margin: 20px auto; 
}

• 第二种CSS写法：

.body { text-align: center; }
.square { 
  text-align: center; 
  background-color: #16a868; 
  background-image: url(https://us.123rf.com/450wm/leavector/leavector1901/leavector190100001/leavector190100001.jpg?ver=6); 
  line-height: 70px; 
  width: 400px; 
  height: 800px; 
  color: #701ba1; 
  margin: 20px auto; 
}

错误原因分析 #

1. 图片链接无效

   • 第一个链接是Google图片的跳转链接，并非直接的图片资源URL，浏览器无法通过这种重定向链接加载背景图。
   • 第二个123rf的图片存在防盗链机制，外部站点直接引用会被拦截，导致图片加载失败。

2. CSS选择器错误
   你写的.body是类选择器，但页面中的<body>标签是HTML元素，应该用元素选择器body（去掉前面的点），否则样式不会作用到页面的body元素上。

3. 样式覆盖与属性缺失
   在第二种写法中，.square同时设置了background-color和background-image，当图片加载失败时，背景色会覆盖显示；另外你没有设置background-repeat、background-size等属性，即使图片加载成功，也可能因为默认样式导致看不到效果。

修复方案 #

1. 使用有效图片链接
   把目标背景图片下载到本地，上传到Neocities站点的文件空间（比如新建images文件夹存放），然后用相对路径引用，示例：

   background-image: url("images/abstract-lines.jpg");
   

2. 修正CSS选择器
   将.body改为body，确保样式作用到页面的body元素：

   body { 
     text-align: center; 
     background-image: url("images/abstract-lines.jpg");
     background-repeat: no-repeat;
     background-size: cover; /* 让图片覆盖整个背景 */
     min-height: 100vh; /* 确保body高度占满视口 */
   }
   

3. 调整.square的样式（可选）
   如果要给.square设置背景图，需要确保background-color不会影响图片显示，或者去掉background-color，同时添加必要的背景属性：

   .square { 
     text-align: center; 
     background-image: url("images/your-image.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     line-height: 70px; 
     width: 400px; 
     height: 800px; 
     color: #701ba1; 
     margin: 20px auto; 
   }
   

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