CSS背景图片无法显示：图片与SCSS同目录，多种url写法均未生效

核心诱因 #

• 路径参照基准错误：CSS规则中url()的解析路径，是相对于编译后生成的CSS文件的线上访问位置计算的，和SCSS源文件的本地存储目录没有任何关联。你尝试的相对路径写法，默认把路径参照锚定在了SCSS源文件目录上，当编译后的CSS文件输出到其他目录时，浏览器实际请求的路径会完全偏移，自然无法找到图片。
  举个典型场景：SCSS源文件存储在src/scss/main.scss，经编译后输出到dist/assets/css/main.css，此时你写url("day.jpg")，浏览器会自动向dist/assets/css/day.jpg发起请求——只要day.jpg没有被同步拷贝到这个位置，就会加载失败。
• 构建工具资源处理规则缺失：使用Webpack、Vite等现代构建工具时，SCSS目录下的静态资源不会自动被打包到输出目录。如果没有手动配置资源拷贝规则、或是没有把图片放入工具识别的公开静态目录（如Vite的public目录、配置好的Webpack assets路径），哪怕路径拼写完全正确，服务器上也不存在对应图片文件。
• 绝对路径的根目录不匹配：你尝试的url("/day.jpg")这类绝对路径，是相对于站点根目录计算的。如果本地开发服务的根目录不是项目根目录、或是项目本身嵌套在子路径下部署，该路径会直接指向错误的服务器位置。另外Linux类服务器对文件大小写严格敏感，如果实际文件名是day.JPG，代码中写小写的day.jpg会直接返回404。
• 可视区域缺失：如果设置背景图的元素没有显式设置宽高、或是元素内部无内容撑开尺寸，哪怕图片请求完全成功，也会因为元素没有可视区域看不到背景效果。

快速排查定位 #

• 打开浏览器开发者工具的「网络（Network）」面板，刷新页面筛选day.jpg请求：
  • 若请求返回404：复制请求的完整URL，和图片实际在服务器上的存储路径做对比，修正url()的相对/绝对路径即可。
  • 若请求返回200但仍不显示：检查图片文件是否损坏、返回的资源类型是否为合法图片格式、对应元素是否存在有效可视尺寸。
• 核对编译后CSS文件与day.jpg的实际目录层级，保证url()中的相对路径完全匹配编译后的目录结构。
• 检查文件名大小写，避免跨Windows本地和Linux服务器部署时出现路径不匹配问题。

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