background-position能为CSS提供精确的定位背景

前言

四月份入职实习后，因为忙(lang)，就没什么时间来写博客，但这都不是理由，在公司实习期间还是学到挺多的，查漏补缺。对于一些知识点有了自己新的理解，这段时间将会做一个小总结，今天就来总结一下用的比较多的background-position～

用它来干嘛

精准定位图片

有时候我们想放一张图片到html中，这时我们或许会选择使用img标签，但是谁用谁知道，img标签就相当于一个普通元素，如果要实现裁剪、偏移、缩放是非常繁琐的，于是有时候我们就会将图片放入到一个“空”元素中作为背景图片，然后利用background给我们的各种属性实现图片的各种操作，来按照自己的想法合理地给展示图片。

实现CSS雪碧图

CSS雪碧图我之前写过一个小文章简述他的使用方式，简单来说就是将许多小的icon合并为一张图片，然后用background-position来进行“裁剪”，极大的减少了http的请求，具体请移步到CSS Sprite雪碧图应用

解读各种值的含义

background-position的属性指可以设置为：left,center等方位名、30%百分比、100px具体值。对于之前对该css属性不太熟悉的我还是比较懵的。于是在此做一个总结。

方位名为属性

个人认为设置为方位名比较容易理解与操作，background-position其实是background-position-x与background-position-y的缩写，取值为：

属性 值
background-position-x left center right
background-position-y top center bottom

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
    .box {
        height: 400px;
        width: 550px;
        float: left;
        margin: 20px;
        border: 1px solid red;
        background: url(./test.jpg);
        background-repeat: no-repeat;
    }
    .box1{
        background-position: right bottom;            
    }
    .box2{
        background-position: left bottom;            
    }
    .box3{
        background-position: center center;            
    }
    .box4{
        background-position: center bottom;       
    }

</style>
<body>
    <div class="box1 box"></div>
    <div class="box2 box"></div>
    <div class="box3 box"></div>
    <div class="box4 box"></div>
</body>

如图：image

具体值为属性

默认背景图片的起始位置为父元素的左上角对其，这里我们要注意：当属性值为正数时，向“内”偏移，反之向“外”偏移，这也是很好理解，我们以下代码以及实例来分析：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .box1{
        /* background-position: 100px 100px;             */
    }
    .box2{
        background-position: -100px -100px;            
    }
    .box3{
        background-position: 100px 100px;            
    }
    .box4{
        background-position: 100px -100px;       
    }

</style>
<body>
    <div class="box1 box"></div>
    <div class="box2 box"></div>
    <div class="box3 box"></div>
    <div class="box4 box"></div>
</body>

如图：
image

这里我们当然也可以设置值为不同的单位，比如rem em 等，一般会使用具体值来定位裁剪css雪碧图。

以百分比为属性值

错误打开方式

这是这个属性比较难以理解的点，如果对此不太熟悉的你，或许会以为他的百分比是根据其父元素来设置的，但是并非如此，我们demo的图片大小为480 x 300，父元素框600 x 600，我们简单来设置一个百分比:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .box {
        height: 600px;
        width: 600px;
        float: left;
        margin: 20px;
        border: 1px solid red;
        background: url(./test.jpg);
        background-repeat: no-repeat;
    }
    .box1{
        background-position: 30% 30%;            
    }
</style>
<body>
    <div class="box1 box"></div>
</body>

如图：
image

我们看到demo图示，如果说按照我们之前的yy，根据父元素大小来设置百分比，30% * 600 = 180px ,但是实际上却不是这样，所以说，我们之前的想法是错误的。

正确打开方式

我们带着疑问来到了谷歌，查阅资料才发现事情并不是这么简单：

background-postion:x y;

x：{容器(container)的宽度—背景图片的宽度} x 百分比，超出的部分隐藏。

y：{容器(container)的高度—背景图片的高度} x 百分比，超出的部分隐藏。

根据这一套换算方式，我们可以算出具体的值，我们还是以上面的例子来换算：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .box {
        height: 600px;
        width: 600px;
        float: left;
        margin: 20px;
        border: 1px solid red;
        background: url(./test.jpg);
        background-repeat: no-repeat;
    }
    .box1{
        background-position: 30% 30%;            
    }
</style>
<body>
    <div class="box1 box"></div>
</body>

如图：
image

尽管我们弄明白了这个换算方式，但是我并不建议大家使用百分比来设置定位，但是有一种是可以推荐使用的：

1
background-position: 50% 50%;

按照我们之前换算：

x：(600-480)*50% = 60px

y: (600-300)*50% = 150px

我们发现，他刚好使背景居中放置，这和我们之前设置的center是等价的：

1
background-position: center center;

如图：image

缺省值

当我们设置属性值的时候，position-x的值，那么会发 怎样的情况呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 <style>
    .box {
        height: 600px;
        width: 600px;
        float: left;
        margin: 20px;
        border: 1px solid red;
        background: url(./test.jpg);
        background-repeat: no-repeat;
    }
    .box1{
        background-position: 100px;       
    }
    .box2{
        background-position: right;            
    }
    .box3{
        background-position: 30%;            
    }
</style>
<body>
    <div class="box1 box"></div>
    <div class="box2 box"></div>
    <div class="box3 box"></div>
</body>

如图：
image

我们猜测如果没有设置第二个属性，那么默认值为center也就是50%，没错， 档上确实也是这样的。

总结

background-position其实并没有什么难点，常用的也就那几个值，就能满足基本上所有的需求，但是当我们看到别人的代码，使用了百分比，这个时候我们就能辨别出该代码作者的用意以及精确的值，对于我们维护有着较大的帮助。