在网页开发中，使用CSS控制背景图片的显示方式是非常常见的需求。我们可以通过background-position来指定图片在容器中的起始位置，通过background-size来决定图片的缩放尺寸，两者配合能解决大多数背景图排版问题。
background-position基础用法
background-position用于设置背景图像相对于容器原点的偏移。它支持关键字、百分比和长度值。
- 关键字：如 top left、center bottom
- 百分比：第一个值为水平位置，第二个值为垂直位置
- 长度：如 20px 30px
当使用百分比时，意思是图片自身的百分比点与容器的百分比点重合。例如 background-position: 50% 50% 表示图片中心对齐容器中心。
background-size控制尺寸
background-size决定背景图片的绘制大小，常用值如下：
| 值 | 说明 |
|---|---|
| cover | 等比缩放，完全覆盖容器，可能裁切 |
| contain | 等比缩放，完整显示图片，可能留白 |
| 100px 200px | 固定宽高，第二个值省略时默认auto |
组合使用的代码示例
下面演示如何同时设置定位与大小：
.box {
width: 400px;
height: 300px;
background-image: url('https://ipipp.com/demo.jpg');
/* 图片居中且覆盖容器 */
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
使用简写属性
CSS允许用 background 简写一次性设置，但要注意顺序和斜杠分隔 size：
.card {
background: url('https://ipipp.com/bg.png') no-repeat center / contain;
}
响应式中的实践
在移动端，我们常让背景图 contain 显示避免裁切，而在桌面端用 cover 填充。可以用媒体查询切换：
.banner {
background: url('https://ipipp.com/banner.jpg') no-repeat center;
background-size: contain;
}
@media (min-width: 768px) {
.banner {
background-size: cover;
}
}
理解 background-position 与 background-size 的关系，多写几个示例就能灵活控制任何背景图的呈现效果。
CSSbackground-positionbackground-size背景图片定位响应式背景修改时间：2026-07-25 02:39:08