bg-position属性值百分比和px的不同(精灵图表现)

背景位置

background-position:水平方向垂直方向;

取值有三种方式

方位名词(center left right)
精确单位(数字+px[坐标])
百分比

在使用精灵图时, 通常是pxcook量取目标宽高和坐标, 然后通过盒子引入背景图, 同时bg-position的px值对应移动背景图, 默认是left和top的x y轴取值方向, 即水平向右正值, 垂直向下正值.

如下图: G字母的w106+h108 bgp(-98px -139px)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 106px;
            height: 108px;
            background: url(./精灵图测试.jpg) no-repeat -98px -139px;
        }
    </style>
</head>

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

</html>

效果:

扫描二维码关注公众号，回复： 14827971 查看本文章

问题来了, bg-position百分比会怎么样?

可根据精灵图宽高算出, bg-position(-16.33% -20.78%) 按照上面像素值的取值方向, 这里很容易就想到用负值.因为图要往左边和上边移动嘛?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 106px;
            height: 108px;
            background: url(./精灵图测试.jpg) no-repeat -16.33% -20.78%;
        }
    </style>
</head>

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

</html>

效果图:

可以看到并没有显示, 看到这就想到了, 应该用正值.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 106px;
            height: 108px;
            background: url(./精灵图测试.jpg) no-repeat 16.33% 20.78%;
        }
    </style>
</head>

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

</html>

虽然这里定位不准(从中可以看到百分比和固定像素的定位规则是不一样的)

总之, 固定像素背景图定位可以精确定位, 百分比背景图定位方向和固定像素完全不一样, 切莫混用. 记录以便后面查看~~

查阅了其他文章, 有一篇彻底解释了为什么百分比会出现和我们惯性思维不符的问题.

positionX = (容器的宽度-图片的宽度) * percentX;
positionY = (容器的高度-图片的高度) * percentY;

也就是说, 如我们的精灵图, 大小为600*669, 我们的容器大小为106*108, 根据第一例我们可知要移到字母G,像素值应设为-98px -139px. 根据上面的公式, positonX为负, 容器宽高-背景图宽高为负, 所以percent值必须为正. 百分比不是我们想象中直接以背景图或者元素本身作参照, 而是联合作参照, 并且由于元素和背景图的公式, 正负方向和传统固定像素也可能不一样.

可以求得percentX=19.84% percentY=24.78%

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 106px;
            height: 108px;
            background: url(./精灵图测试.jpg) no-repeat 19.84% 24.78%;
        }
    </style>
</head>

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

</html>

效果:

公式来源于css背景图background-position百分比的理解 - 码农教程

有兴趣的可以去看看.

bg-position属性值百分比和px的不同(精灵图表现)

猜你喜欢