html怎么设置背景图片：两种主流写法
html怎么设置背景图片，分为html标签background属性和CSSbackground-image两种写法，推荐优先使用CSS方式，CSS写法可控性更强，支持图片重复、定位、缩放、固定等配套参数，旧版标签属性仅适合简单静态页面，不适合需要适配移动端、做动画或者响应式布局的项目，图片路径分为相对路径、绝对路径，路径写错会直接导致图片无法加载，本地开发时优先用相对路径，线上服务器环境可使用图片外链地址。
html怎么设置背景图片，标签原生写法
直接在body标签添加background属性，属性值填写图片地址，完整示例为
不推荐大量使用。
html怎么设置背景图片，CSS标准写法
CSS方式可以写在style标签内部、外部CSS文件或者行内style属性里，最常用的是内部样式表，在head区域添加style标签，选择器选中body或者指定div容器，核心属性background-image:url("图片地址")，url括号内的引号可以省略，加上引号能避免文件名包含空格、特殊字符时出现解析异常，搭配background-repeat控制重复模式，background-position控制图片位置，background-size控制尺寸。
| 属性 | 常用取值 | 作用 |
|---|---|---|
| background-repeat | no-repeat、repeat、repeat-x | 控制图片是否平铺 |
| background-position | center、topleft、50%50% | 设置背景图片位置 |
| background-size | cover、contain、100%100% | 控制图片缩放填充 |
| background-attachment | fixed、scroll | 滚动时背景是否固定 |
cover会让图片铺满整个容器，超出部分自动裁切，适合全屏背景；contain会完整显示整张图片，容器空白区域会露出底色，适合不想裁切图片的场景，100%100%会强制拉伸图片适配容器，容易造成图片变形，一般不优先选用。
你可以简写background属性，把多个参数合并书写，格式为background:url("bg.jpg")no-repeatcenter/cover，顺序大致为图片地址、重复方式、位置/尺寸，其余参数可以按需补充，简写写法能减少代码行数，阅读和维护时需要熟悉参数顺序，避免顺序错乱引发样式失效。
图片路径是高频出错点，相对路径向上一级文件夹需要写../，两级就是../../，外链图片要完整带上https开头的地址，部分网站图片设置防盗链，直接复制外链会出现空白，这种情况要把图片下载到自己服务器再引用。
该方法的适用边界是，背景图片仅作为装饰元素，不能替代img标签展示内容类图片，图片里包含文字、产品实拍这类需要被搜索引擎识别的主体内容时，要使用img标签，背景图片无法被屏幕阅读器正常读取，不利于无障碍访问。
给容器设置背景图片时，容器必须拥有高度，div默认高度由内部内容撑开，内部无内容时高度为0，背景图片不会显示，你可以给容器设置height或者min-height属性，比如min-height:100vh实现全屏高度，保证背景正常渲染。
- 图片格式优先选用webp，文件体积更小，加载速度更快
- 搭配background-color设置底色，图片加载失败时展示底色
- 移动端全屏背景推荐使用cover，同时设置min-height:100vh
- 行内样式优先级高于内部样式表，会覆盖外部样式设置
