在html中需用css的background-size属性设置图片背景大小为固定像素值，语法为background-size: 宽度px 高度px;，需配合background-image使用并推荐设background-repeat: no-repeat;。
在HTML中设置图片背景大小为固定像素值，实际是通过CSS的 background-size 属性来实现的，因为HTML本身不直接控制背景尺寸。
使用 background-size 设置固定像素宽高
将背景图缩放到指定的像素宽度和高度，语法为：background-size: 宽度px 高度px;。此时背景图会被强制拉伸或压缩到该尺寸，不保持原始比例。
-
例如：
background-size: 300px 200px;表示背景图显示为宽300像素、高200像素 - 需配合
background-image使用，且推荐同时设置background-repeat: no-repeat;避免平铺干扰效果 - 该写法适用于容器有明确尺寸（如设置了 width/height）或需要精确控制背景图呈现范围的场景
注意容器尺寸与背景图显示的关系
即使设了 background-size，若容器本身太小，背景图可能被裁剪；若容器太大，空白区域会显示背景色（默认透明）。建议确保父容器有合适的尺寸或使用 min-height/height 约束。
- 常见做法：给元素设置
width: 100%; height: 400px;或自适应高度（如min-height: 300px;） - 若希望背景图居中显示，加上
background-position: center; - 为兼容老版本浏览器（如IE9+），可加前缀
-webkit-background-size，但现代项目通常无需
避免常见错误
容易混淆的是把 background-size 和 img 标签的 width/height 属性混用——后者只适用于内联图片，对 CSS 背景图无效。
- ❌ 错误写法：
<div style="background-image: url(x.jpg); width: 300px; height: 200px;"></div>（这仅限制容器大小，不改变背景图自身尺寸） - ✅ 正确写法：
<div style="background-image: url(x.jpg); background-size: 300px 200px; width: 300px; height: 200px; background-repeat: no-repeat;"></div> - 若只需等比缩放至某一边固定（如宽度固定、高度自适应），可用
background-size: 300px auto;
完整示例代码
以下是一个带背景图、固定背景尺寸并居中的实用写法：
<div style="
background-image: url('photo.jpg');
background-size: 600px 400px;
background-repeat: no-repeat;
background-position: center;
width: 600px;
height: 400px;
margin: 0 auto;
"></div>
这样就能让背景图严格按600×400像素显示，且水平垂直居中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
