link标签不能直接加载背景图，必须通过引入含background-image的CSS文件实现；CSS中需设置background-size、路径相对HTML文件、避免FOUC及404等问题。
link 标签不能直接加载背景图
直接用 <link> 标签加载背景图是无效的——link 只负责引入外部资源（如 CSS、favicon、preload 资源），它本身不定义视觉样式。背景图必须写在 CSS 里，再通过 link 引入该 CSS 文件。
正确流程：用 link 引入含 background-image 的 CSS
核心是两步分离：CSS 文件里写好 background-image，HTML 用 <link rel="stylesheet" href="..."> 加载它。
-
link必须放在<head>内，且rel="stylesheet"一个字母都不能错（大小写敏感、带引号、无空格） - CSS 中推荐使用
body { background-image: url('bg.jpg'); background-size: cover; background-repeat: no-repeat; }，避免默认平铺或拉伸失真 - 路径以 HTML 文件为基准：如果 CSS 和 HTML 同级，图片在
images/bg.jpg，那 CSS 里就写url('images/bg.jpg')，不是相对于 CSS 文件的位置 - 不要在
link上加type="text/css"——HTML5 已废弃，多余且可能干扰某些构建工具
常见失效原因和对应检查点
页面没显示背景图，大概率不是代码逻辑错，而是路径、加载时机或缓存问题。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 控制台报
404：检查图片 URL 是否拼错，是否漏了扩展名（比如写成bg而非bg.jpg） - 背景图只显示左上角一小块：CSS 没加
background-size: cover或background-position: center - 页面闪一下白底再出图：CSS 放在
<body>里，或link被 JS 动态插入——这会触发 FOUC（Flash of Unstyled Content） - 本地双击打开 HTML 正常，但服务器访问失败：检查服务器是否允许读取图片路径（特别是跨域或 MIME 类型未配置时）
替代方案：内联 style vs 外部 CSS 的取舍
虽然可以用 <body style="background-image: url(...)..."> 快速测试，但不建议用于生产环境。
立即学习“前端免费学习笔记（深入）”；
- 内联样式无法复用、难维护，且会覆盖外部 CSS 中同名规则，调试时容易误判来源
- 外部 CSS 支持浏览器缓存，同一张背景图在多页间可复用，而内联每次都要重新下载
- 如果背景图需响应式切换（比如暗色模式下换图），必须用 CSS 媒体查询或 JS 操作 class，内联 style 基本不可控
真正需要动态换背景图时，别碰 link 的 href，而是操作 document.body.style.backgroundImage 或切换预设 class——link 只管“一次性加载样式规则”，不参与运行时变更。
