【css】background-position定位背景图片_背景定位background-position:20% 60%,则表示此背景图像左边框距离其容器的右-CSDN博客

本文深入探讨CSS中background-position属性的使用技巧，包括如何利用百分比和像素精确控制背景图片的位置，以及如何通过calc函数和background-origin属性实现与容器内边距的完美配合，使背景图片定位更加灵活和维护友好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <div class="box"></div>
</body>

.box{
    width:200px;
    height:200px;
    background:lightgoldenrodyellow url(./imgs/PC.png) no-repeat;
    background-position:left;
    /* background-position:right;
    background-position:top;
    background-position:bottom;
    background-position:left top;
    background-position:left bottom;
    background-position:right top;
    background-position:right bottom; */
}

background-position:left | right | top | bottom | left top
| left bottom |right top | right bottom | 百分比百分比
其中，background-position:0% 0%，
第一个百分比，代表了背景图像的水平位置，0%则意味着背景图像的左边界与容器左边界重合；
第二个百分比，代表了背景图像的垂直位置，0%则意味着背景图像的上边界与容器上边界重合。
background-position:right 20px bottom 40px
意思是，背景图像的右边界距离容器右边界20px，背景图像下边界距离容器下边界40px。
background-position:right 20px bottom 40px 同
background-position:calc(100% - 20px) calc(100% - 40px)

.box{
    width:200px;
    height:200px;
    background:lightgoldenrodyellow url(./imgs/PC.png) no-repeat;
    /* background-position:right 20px bottom 40px; */
    background-position:calc(100% - 20px) calc(100% - 40px);
}

在这里插入图片描述

定位背景图片
将背景图片定位到容器右下角，且与容器右下角有部分间隙，水平、垂直间隙宽度都等于容器内边距。

/* 第一种方式 */
.box{
    width:200px;
    height:200px;
    background:lightgoldenrodyellow url(./imgs/PC.png) no-repeat;
    padding:10px;
    background-position:right 10px bottom 10px;
}

但是，如果要改动padding，就意味着要改3处。
所以，《css世界》给出了维护性更好的一种方式，如下：

.box{
    width:200px;
    height:200px;
    background:lightgoldenrodyellow url(./imgs/PC.png) no-repeat;
    padding:10px;
    background-origin:content-box;
    background-position:right bottom;
}

background-origin决定了背景图像左上角的放置位置，其默认值是padding-content，即背景图像的左上角与padding-box的左上角重合。
现将 background-origin修改为content-box，此时，背景图像的左上角总是与content-box重合并平铺开来，所以背景图像总会与padding-box有 padding宽的间隔。
在这里插入图片描述