如何用CSS仅显示div背景图的特定区域（类似裁剪）

当然可以通过CSS实现这种局部裁剪的背景效果，核心是利用background-position配合background-size来精准控制背景图的显示区域，以下是几种实用方案：

1. 精准定位原尺寸图片的局部区域 #

如果想直接使用图片原尺寸，只截取某一块区域作为div背景，只需通过background-position指定要显示区域的左上角相对于图片左上角的偏移量，再配合固定尺寸的div实现裁剪：

/* 固定尺寸的横幅容器 */
.banner {
  width: 1200px;
  height: 300px;
  /* 引入网络背景图 */
  background-image: url('https://helpx.adobe.com/content/dam/help/images/gh_07.png');
  /* 定位：x轴向右偏移200px，y轴向下偏移100px，显示图片从该点开始的1200*300区域 */
  background-position: 200px 100px;
  /* 禁止背景图重复 */
  background-repeat: no-repeat;
  /* 保持图片原尺寸，不缩放 */
  background-size: auto;
}

background-position支持三种取值方式：

• 像素值：直接控制偏移量，适合精确裁剪特定位置
• 百分比：背景图的对应百分比位置与容器的对应百分比位置对齐（比如50% 50%就是居中显示）
• 关键字：快速定位到边角或中心区域（如top right、center）

2. 缩放后裁剪局部区域 #

如果背景图尺寸过大，需要先缩放再裁剪，可以通过background-size调整图片缩放比例，再用background-position定位到目标区域：

.banner {
  width: 1200px;
  height: 300px;
  background-image: url('https://helpx.adobe.com/content/dam/help/images/gh_07.png');
  /* 将图片宽度缩放到2000px，高度按原比例自动调整 */
  background-size: 2000px auto;
  /* 向左偏移400px，使图片中间1200px宽度的区域刚好填满容器 */
  background-position: -400px center;
  background-repeat: no-repeat;
}

3. 用clip-path实现容器级裁剪 #

如果需要更灵活的不规则裁剪，或者希望直接对容器可视区域进行裁剪，可以使用clip-path属性：

.banner {
  width: 1200px;
  height: 300px;
  background-image: url('https://helpx.adobe.com/content/dam/help/images/gh_07.png');
  /* 让背景图铺满容器 */
  background-size: cover;
  /* 裁剪规则：从顶部、右侧、底部、左侧分别向内偏移100px、0、0、200px，保留中间区域 */
  clip-path: inset(100px 0 0 200px);
}

注意事项 #

• background-position的偏移量可以是负数，用于向左/向上偏移图片，显示图片左侧/顶部的区域
• 如果需要保持背景图的比例，建议使用background-size: auto或contain/cover配合定位
• 所有方案兼容性良好，支持绝大多数现代浏览器

内容的提问来源于stack exchange，提问作者manski