background-position 背景位置

学习

background-position 背景位置

2026-02-23/0/ 编辑

background-position 背景位置

概念

background-position 属性用于设置背景图片在元素中的起始位置。

语法

background-position: 水平位置 垂直位置;

属性值

1. 关键字

水平位置说明
left左对齐
center居中
right右对齐
垂直位置说明
top顶部对齐
center居中
bottom底部对齐

2. 像素值

background-position: 30px 20px;  /* 水平30px 垂直20px */
background-position: 100px 50px; /* 水平100px 垂直50px */

3. 百分比

background-position: 50% 50%;  /* 居中 */
background-position: 10% 20%;  /* 水平10% 垂直20% */
background-position: 0% 0%;    /* 左上角 */

4. 混合值

background-position: 10px center;   /* 水平10px 垂直居中 */
background-position: center 20px;   /* 水平居中 垂直20px */

百分比计算原理

当使用百分比时，计算方式为：

水平位置 = (容器宽 + padding*2 - 背景图宽) * 百分比
垂直位置 = (容器高 + padding*2 - 背景图高) * 百分比

示例

.container {
    width: 200px;
    height: 100px;
    padding: 0;
    background-image: url(bg.png);
    background-size: 50px 50px;
}

/* 左边距离 = (200 + 0 - 50) * 10% = 15px */
/* 顶部距离 = (100 + 0 - 50) * 20% = 10px */
.container {
    background-position: 10% 20%;
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-position 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            background-image: url(./images/bg.png);
            background-repeat: no-repeat;
            background-size: 50px 50px;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 10px;
            text-align: center;
            font-size: 12px;
        }

        .box1 {
            /* 水平30px 上边20px */
            background-position: 30px 20px;
        }

        .box2 {
            /* 水平10px 垂直居中显示 */
            background-position: 10px;
        }

        .boxk {
            width: 200px;
            height: 100px;
            border: 2px solid red;
            background-image: url(flower.jpg);
            background-size: 50px 50px;
            background-repeat: no-repeat;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 10px;
            text-align: center;
            font-size: 12px;
        }

        .box3 {
            /* 左边距离 = (200 + 0 - 50) * 10% = 15px */
            /* 顶部距离 = (100 + 0 - 50) * 20% = 10px */
            background-position: 10% 20%;
        }

        .box4 {
            background-position: 15px 10px;
        }

        .container::after {
            content: "";
            display: block;
            clear: both;
        }

        h3 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>background-position 背景位置演示</h1>

    <div class="container">
        <div class="box box1">
            <strong>30px 20px</strong><br>
            水平30px<br>垂直20px
        </div>

        <div class="box box2">
            <strong>10px</strong><br>
            水平10px<br>垂直居中
        </div>

        <div class="boxk box3">
            <strong>10% 20%</strong><br>
            水平15px<br>垂直10px
        </div>

        <div class="boxk box4">
            <strong>15px 10px</strong><br>
            固定像素值
        </div>
    </div>
</body>
</html>

常用位置值

值说明效果
left top 或 0% 0%左上角图片从左上角开始
center top 或 50% 0%顶部居中图片在顶部中间
right top 或 100% 0%右上角图片从右上角开始
left center 或 0% 50%左侧居中图片在左侧中间
center center 或 50% 50%完全居中图片在元素中心
right center 或 100% 50%右侧居中图片在右侧中间
left bottom 或 0% 100%左下角图片从左下角开始
center bottom 或 50% 100%底部居中图片在底部中间
right bottom 或 100% 100%右下角图片从右下角开始

实际应用场景

场景 1：背景图片居中

.hero {
    width: 100%;
    height: 500px;
    background-image: url(hero.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

场景 2：图标背景

.icon-btn {
    padding-left: 30px;
    background-image: url(icon.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 16px 16px;
}

场景 3：CSS Sprite（精灵图）

/* 一个图片包含多个图标，通过 position 显示不同部分 */
.sprite {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
}

.icon-home {
    background-position: 0 0;
}

.icon-user {
    background-position: -50px 0;
}

.icon-settings {
    background-position: -100px 0;
}

场景 4：装饰性背景

.card {
    background-image: url(decor.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

场景 5：多张背景图

/* 可以为每张背景图设置不同的位置 */
.background {
    background:
        url(pattern1.png) no-repeat top left,
        url(pattern2.png) no-repeat bottom right,
        url(bg.jpg) repeat;
    background-position:
        0 0,
        100% 100%,
        center center;
}

多张背景图的位置设置

当有多张背景图时，可以分别为每张图片设置位置：

.background {
    background-image:
        url(icon1.png),
        url(icon2.png),
        url(bg.png);

    background-position:
        10px 10px,    /* 第一张图片 */
        50px 10px,    /* 第二张图片 */
        center center; /* 第三张图片 */
}

与其他属性配合

与 background-size 配合

.cover {
    background-image: url(large-image.jpg);
    background-size: cover;
    background-position: center center;
}

与 background-repeat 配合

.no-repeat {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: center;
}

简写属性

/* 完整简写 */
background: url(bg.png) no-repeat center center / cover;

/* 只设置位置（使用默认其他值）*/
background-position: center;

注意事项

  1. 百分比计算：百分比是相对于（容器尺寸 - 背景图尺寸）计算的
  2. 只有一个值：如果只提供一个值，第二个值默认为 center
  3. 默认值：background-position 的默认值是 0% 0%（左上角）
  4. 负值：可以使用负值将背景图片移出元素边界
  5. 多图时：多张背景图的位置值用逗号分隔

浏览器兼容性

background-position 在所有现代浏览器中都完全支持。

常见问题

Q1: 如何让背景图片完全居中？

.center-bg {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

Q2: 如何使用百分比精确定位？

/* 水平 20%，垂直 30% */
.positioned {
    background-position: 20% 30%;
}

Q3: 多张背景图如何设置不同位置？

.multi-bg {
    background-image: url(bg1.png), url(bg2.png);
    background-position: 10px 10px, 50px 50px;
}

最佳实践

/* ✅ 推荐：背景图片居中 */
.hero {
    background: url(hero.jpg) no-repeat center center / cover;
}

/* ✅ 推荐：图标按钮 */
.icon-button {
    background: url(icon.png) no-repeat 10px center;
    padding-left: 40px;
}

/* ✅ 推荐：装饰背景 */
.decorative {
    background: url(decor.png) no-repeat bottom right;
}

/* ✅ 推荐：精灵图 */
.sprite {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
}

学习笔记：background-position 精确控制背景图片的位置，是实现各种背景效果的关键属性。

猜你喜欢