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