如何裁剪div背景图左右各50px并保持100%宽度填充屏幕？

你可以通过调整background-size和background-position属性来实现这个需求：

核心思路是把背景图宽度放大（左右各额外延伸50px），再向左偏移50px，这样div的边界会自动裁切掉图片左右各50px的部分，剩余区域刚好填满整个div宽度。

修改后的CSS代码如下：

div {
  background: white url("https://placekitten.com/1000/1000") no-repeat left top;
  background-size: calc(100% + 100px) auto; /* 宽度比div宽100px，高度保持原图比例 */
  background-position: -50px top; /* 向左偏移50px，裁掉左侧50px，右侧超出部分自动被隐藏 */
}

代码细节说明 #

• background-size: calc(100% + 100px) auto：让背景图宽度比div本身宽100px（左右各多50px），高度自适应原图比例，确保图片内容完整。
• background-position: -50px top：将背景图向左偏移50px，此时div左侧会裁切掉图片的前50px，而图片右侧超出div的50px部分也会被容器边界隐藏，最终显示的就是原图片裁剪掉左右各50px后的区域，且刚好填满整个div宽度。

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