屏幕缩小时如何将背景图裁剪方向改为左边缘而非右边缘

当然可以实现这个需求，只需要给你的背景图容器添加background-position属性，指定背景图靠右对齐即可。

原理说明 #

默认情况下，background-size: cover搭配默认的background-position: left center，当容器宽度小于背景图宽度时，会从背景图的右侧开始裁剪。将background-position设置为right center（或简写为right，也可以用100% center），背景图会紧贴容器的右边缘，当容器宽度缩小时，就会从背景图的左侧开始裁剪。

修改后的完整代码 #

CSS

.bg-image {
    background-image: url("https://i.imgur.com/wKF7rWc.png");
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center; /* 关键修改 */
}

HTML

<div class="bg-image"></div>

你可以根据需要调整background-position的垂直参数，比如如果希望背景图垂直顶部对齐，就改成right top，垂直底部对齐则是right bottom，默认的center能保持垂直居中。

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