通俗地解析background属性

2018-08-17

我们在做项目的时候，通常会遇到设置背景图与屏幕大小相适应问题

而background中一些属性的取值是可以直接影响到背景图的呈现效果，包括CSS3当中新增的几个新的属性值：background-size，background-origin，background-clip，还有CSS1当中的background-position

之前在项目中达不到想要的背景图效果，总是将各种取值都试一遍，现在认真解析了一遍，每个值都要特点的效果，本篇文章主要是对上述几个属性做一下通俗易懂的解释

background-size

取值

background-size: auto || <length> || <percentage> || cover || contain

auto: 默认值，保持背景图原有高度和宽度

length: 具体像素值，改变背景图大小

percentage：百分值(0％〜100％)，作用于块元素，背景图大小取决于所在块元素的宽度百分比

cover: 背景图放大到铺满整个容器，适应于图片尺寸小于元素容器

container：背景图缩小到铺满整个容器，适应于图片尺寸大于元素容器

当取值为length或percentage，可以设置一个值 第二个值相当于auto auto的值与第一个值相同

DEMO结构和效果

HTML Code

<div class = "test"></div>

先加上初步的效果

.test {
     background: url("./images/background_image.jpg") no-repeat;
     width: 800px;
     height: 450px;
     line-height: 450px;
     border: 1px solid #999999;
     margin: 30px;
 }

找了张(380px*300px)左右的图片来当作背景图片使用

image

background-size:auto

在上述.test{...}中增加一行

background-size:auto;

效果

image

效果等同于没加background-size效果一样

background-size:'length'

同样的增加一行,如

background-size: 550px 300px;

效果

image

从上张取值的效果图可以看出来，背景图片由（380px300px）变为（550px300px），已经变形失真

如果只取了一个值，比如background-size:350px ，相当于background-size:350px auto，此时auto的取值为350px/380px*300px

background-size:'percentage'

同样的增加一行，如

background-size:80% 50%;

效果

image

从这张效果图我们可以看出来，背景图大小并不是按背景图的百分比来缩放的，而是按装载背景图的容器元素的百分比计算的，也就是长800px(div.width)*80%，高450px(div.height)*50%

如果只有一个值时，比如background-size:50%，相当于background-size:50% auto，相当于background-size: 50%*800px(div.width) 50%*800px(div.width)/380px(背景图长度)*300px(背景图高度)

上述两种取值也可以搭配使用，如

background-size:47.5% 300px;

background-size:47.5% 300px;的取值实际上就是图片自身的大小(380px*300px)了，效果也等同于一个值background-size:47.5%;

效果

image

background-size: cover

同样的增加一行，如

background-size:cover;

效果

image

从上述效果图可以看到，背景图会放大到适合容器元素的尺寸，原则是背景图的width和height都需要等比例放大到填满容器，以至背景图在装载它的容器元素中占比大的一方向可能超出容器，比如上图中背景图的height明显超出了容器。和上一种取值background-size:100%的效果一样

background-size:contain

上面的cover取值是把背景图片放大到适合容器元素的尺寸，这时的contain刚好是跟cover相反，是把背景图片缩小到适合容器元素的尺寸

这里再重新定义一下容器元素的宽高

width:200px;
height:200px;
background-size:contain;

效果

image

前面已经介绍了背景图片的大小是380px300px，而现在将容器元素改为200px200px

从效果图中我们可以看到背景图等比例的缩小到适合元素容器的尺寸，以至背景图在超出它的容器元素较少的一方向可能与容器有间隙，比如上图中背景图的height超出了100px,width超出了180px，所以等比缩小后height与容器间多出了空隙

从上边的几个效果值可以看出来，cover、contain的值、或者只设置一个值，另一个值为auto时，都不会出现失真的情况，但会出现图片显示不全或者与容器元素出现留白的情况

所以我们在项目开发中合理的定义容器元素的尺寸大小，根据容器尺寸大小和背景图大小合理的选用background-size的取值

background-position

图片定位的问题，比较容易理解，但也有需要注意的点。接下来还是从取值讲起

取值

background-position:  <关键词> || <百分比> || <像素值>

关键词：类似于background-position:top left

像素：类似于background-position: 0px 0px

百分比：类似于background-position: 0% 0%

DEMO结构和效果

上面前两种定位都是

将背景图左上角的原点放置到属性值位置

同样，在上述.test{...}中增加一行background-position: 50px 50px;

.test {
     background: url("./images/background_image.jpg") no-repeat;
     width: 800px;
     height: 450px;
     line-height: 450px;
     border: 1px solid #999999;
     margin: 30px;
     background-position: 50px 50px;
 }

background-position: 50px 50px

image

可以看到，规定的位置是"50px 50px"，也就是图片的左上角的原点在那个位置上

同理，当取值background-position: top left ;

background-position: top left

image

但是第三种取值方法 百分比定位 就不是将背景图左上角的原点放置到属性值位置了，接下来我们设置background-position: 10% 10%;

background-position: x% y%

image

我们先将看百分比定位转换为像素值定位，那width和height的10%，转换为像素值就是

background-position: 80px 45px;

效果

image

对比这两张图，是不是效果很明显不一样，说明百分比定位有自己特有的定位原则

图片本身（x%,y%）的那个点，与背景区域的（x%,y%）的那个点重合

那有人好奇既然这样就直接用像素值定位好了，其实并不是

使用百分比设置的主要优势在于，当页面缩放的时候，背景图片也会跟着一起缩放

background-origin

上面讲到的background-position规定背景显示的位置，但是位置总要有个标准来确定吧，这个标准呢，就是由background-origin这个属性设置的

同样的，我们先来看标准的取值

取值

background-origin: padding-box || border-box || content-box;

padding-box：默认值，背景图相对于内边距框来定位(包括padding)

border-box: 背景图相对于边框盒来定位(包括padding+border)

content-box: 背景图相对于内容框来定位(只包括内容width/height里边的内容)

DEMO结构和效果

我们来看下实际的效果

DEMO

重新修改上述test元素样式

.test {
     background: url("./images/background_image.jpg") no-repeat;
     width: 400px;
     height: 400px;
     line-height: 400px;
     border: 10px dotted #999999;
     margin: 30px;
     background-size:100%;        
}

效果

image

上述是 background-origin的默认样式效果

background-origin: padding-box

在上述.test(...)中增加一行background-origin: padding-box;

image

可以看到跟默认效果一样，只包含了padding的宽度

background-origin: border-box

同样的将background-origin的属性值改为border-box

image

可以看到是包含了boder和padding的宽度的

background-origin: content-box

同样的将background-origin的属性值改为content-box

image

可以看到boder和padding都留白出来了

每种取值的图片效果都不一样，所以具体怎么用，还是得看项目情况了

先写这么多吧，background-clip这个属性目前用的还是不太多，就不赘述了~~~

Powered by PuddingNote