HTML让背景图片自适应全屏的教程-html教程-PHP中文网

必须设置html和body高度为100%并清除边距，否则背景图无法铺满；选用cover或contain需根据是否允许裁剪或留白；高分辨率设备需提供@2x图片并用WebP格式；必须添加遮罩层保障文字可读性。

html让背景图片自适应全屏的教程

body背景图不铺满整个屏幕？先检查html和body高度

绝大多数“背景图只显示一截”的问题，根源不是图片或CSS写错，而是html和body没占满视口。浏览器默认下，body高度由内容撑开，不是100% viewport。哪怕你写了background-size: cover，它也只能覆盖body当前那点高度。

必须显式声明：

html, body { height: 100%; margin: 0; padding: 0; }
缺一不可：漏掉html，body的100%就失去参照；漏掉margin: 0，顶部/左右可能留白
移动端尤其要注意：iOS Safari对height: 100%的解析更严格，建议额外加min-height: 100vh兜底

background-size: cover 和 contain 怎么选

cover和contain行为差异极大，选错会导致裁剪过度或大片留白。

cover：等比缩放至完全覆盖容器，**至少一边溢出** → 全屏背景首选，但需确保关键内容（如人脸、LOGO）在图片中心区域
contain：等比缩放至完全可见，**至少一边留空** → 适合展示完整图表、产品全景图，不适合全屏氛围图
别用100% 100%：强制拉伸，必然变形，尤其在宽高比差异大的设备上（比如iPhone竖屏 vs 宽屏显示器）

移动端和高清屏模糊？光靠cover不够

一张1920×1080的图，在2560×1440的Mac或Retina iPhone上会明显发虚——CSS没缩放错，是像素密度不够。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

提供@2x版本：命名如bg.jpg和bg@2x.jpg，用媒体查询切换：@media (-webkit-min-device-pixel-ratio: 2) { body { background-image: url('bg@2x.jpg'); } }
优先用WebP格式：同画质下体积小30%，加载更快，现代浏览器支持良好
加background-color占位：在图片加载完成前避免白屏，例如background-color: #e0e0e0

文字看不清？遮罩层不是可选项，是必选项

再好的背景图，遇上浅色文字或复杂纹理，可读性立刻崩塌。纯靠调字体颜色治标不治本。

用伪元素叠加半透黑层最稳妥：body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: -1; }
避免用background-blend-mode：兼容性差（IE/旧Safari不支持），且混合结果难预测
如果必须保留原图质感，至少加文字阴影：text-shadow: 0 2px 4px rgba(0,0,0,0.5)

真正卡住人的从来不是background-size这行代码，而是html有没有被设高、图片分辨率够不够、遮罩层加没加——这三个点漏掉任何一个，全屏背景在真实设备上都会翻车。