说说background属性

一、前言

backgound，相信接触前端的人都已经很熟悉了，但是小白们都只是停留在background:#fff的层面上，那么今天作为小白的我要揭竿而起了~(๑•̀ㅂ•́)و✧

二、简述

用作“描述背景”的css属性，background是一系列背景属性的简写，包含了下面几种具体属性：

注：以下摘自w3school

值	描述	CSS
background-color	规定要使用的背景颜色	1
background-position	规定背景图像的位置	1
background-size	规定背景图片的尺寸	3
background-repeat	规定如何重复背景图像	1
background-origin	规定背景图片的定位区域	3
background-clip	规定背景的绘制区域	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动	1
background-image	规定要使用的背景图像	1

那么看看这些属性的默认值都是什么吧，给一个div设置background:#fff，f12看看各自详情：

1. background-color: rgb(255, 255, 255);
2. background-image: none;
3. background-repeat: repeat;
4. background-attachment: scroll;
5. background-clip: border-box;
6. background-origin: padding-box;
7. background-position-x: 0%;
8. background-position-y: 0%;
9. background-size: auto auto;

三、重要知识

css中有很重要的一个知识即为盒模型，这里简单地借用firefox的开发者工具介绍下：

从里往外讲，分为四层，content < padding < border < margin，是不是有点眼熟，之前在box-sizing里面接触过content-box, border-box，这里就不扯远了，接下来的几个需要特别介绍的属性值便需要这些知识。

四、background-origin

背景起始定位。一句话的事，主要是针对背景图片的起始位置，常用有content-box, border-box, padding-box三个属性值，在div的基础样式为：

width: 150px;
height: 150px;
background: #fc6 url("bg.png") no-repeat;
padding: 20px;
border: 20px dashed red;

看看效果图：

没有设置background-origin默认值为padding-box，然后我们分别赋值为：border-box, content-box，再看看效果：

五、background-clip

背景指定裁剪。这是一个异常粗暴的属性，╥﹏╥…在保持上述代码基础上，一次设置background-clip为border-box, padding-box, content-box，然后看看效果图：

六、background-position

背景相对定位。简单来说就是相对于当前位置的定位，是x轴和y轴偏移量的统称，支持px和left等名词，分别设置background-position:10px 10px;和background-position:left center;然后再次看看效果图：

七、background-size

背景图覆盖大小。支持px，百分比，cover，contain，这些属性都是基于background-origin的值，先分别设置background-size:cover;和background-size:contain;看看实际效果：

可以很清楚地看出来铺满的基准不一样，cover是力求覆盖，contain适配到最大但是还是要完整显示；

然后在分别设置background-size:50px 80px;和background-size:100% 100%;看看实际效果：

八、总结

哎呀，其实也没有当初想的那么复杂，但是必须得每一个都要自己去尝试，这才是最骚的 : )