根本原因是css变量只存储字符串，不解析url()，若变量值含错误路径（如缺引号、空格、错误相对路径），url(var(--x))将因语法非法或路径不匹配而静默失效，浏览器既不报错也不发起请求。

根本原因不是var()语法写错了，而是变量值里那个url()指向的资源压根没加载成功——浏览器连请求都没发出去，或者发了但被拦在半路。

检查url()路径是否被CSS变量间接破坏

CSS变量本身不解析url()，只是字符串替换。一旦变量值里拼错路径，url()就失效，且浏览器不会报错，只会静默失败。

• --img-path: "images/logo.png" ✅ 正确：双引号包裹，路径相对当前CSS文件位置
• --img-path: images/logo.png ❌ 错误：缺引号，会被当成多个标识符，url(var(--img-path))最终变成url(images logo.png)，语法非法
• --img-path: "./images/logo.png" ❌ 高危：点斜杠在变量里无效——url()解析路径的基准是**包含该url()的CSS文件位置**，不是HTML，也不是变量定义位置
• 变量值里混入空格、中文字符或未转义的括号（如--bg: "bg(1).jpg"）也会导致url()解析中断

确认url()请求是否出现在Network面板

打开开发者工具 → Network → 刷新 → 筛选Img或All，搜索文件名。如果根本没出现对应请求，说明url()没被浏览器识别为有效资源地址。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 状态码404：变量值里的路径和实际文件位置不匹配（比如--img-path: "img/logo.png"但文件在assets/images/）
• 状态码403：服务器拒绝读取该路径，常见于Nginx未开放assets/目录，或文件权限为600
• 请求URL显示为http://localhost:3000/images/logo.png但你用的是python -m http.server：该命令不支持/images/这种根路径，需改用live-server或调整路径为相对路径
• 请求URL带file://前缀：双击打开HTML时，url()无法跨目录加载，必须走本地HTTP服务

验证url()是否被CSP或浏览器扩展拦截

即使路径对、状态码200，资源也可能被策略级拦截，此时Network里请求会标为blocked或cancelled。

• 查看Console是否有Refused to load the image或Content Security Policy相关提示
• 检查Content-Security-Policy响应头是否缺少img-src指令，或显式禁止了self以外的来源
• 临时禁用广告拦截器（uBlock Origin、AdGuard）、隐私类扩展（Privacy Badger），再刷新测试
• 若变量值来自内联样式（如style="--bg:url(...)”），某些CSP策略会直接拒绝解析整个属性值

最易被忽略的一点：url()里的路径解析永远以**声明该url()的CSS文件位置为基准**，和变量定义在哪无关。把--img-path写在vars.css里，不代表url(var(--img-path))就从vars.css目录找图——它还是从调用它的那个CSS文件位置出发算相对路径。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！