[toc] ## background-image ### 生效前提 虽然说的是生效前提，但其实是生效了只是不可见 background的url并**不像**img的src一样，引入图片后，宿主元素大小会自动变为图片大小。 background的url引入图片后元素大小并不会发生改变。 这意味着，你要想在一个元素中看见背景图片，这个图片的高度不能为0  ### 默认表现 1. 平铺，且是横竖都平铺  2. 页面滚动时，宿主元素随之滚动，其内的图片背景当然得也会和宿主元素**一起**滚动 ## background-position  ### 基准 position都是按照元素的左上原点进行计算的 #### background-origin 默认基准是宿主元素的`padding-box` 还支持:`border-box`、`content-box`  #### background-clip So，background-clip刚好解决上面没有被裁剪的问题 它也有三个值：`padding-box`、`content-box`、`border-box`  ##### text Chrome下还有个text值，就是按照文本进行背景图裁剪 配合Chrome的`text-fill-color:transparent`能制作背景图片填充文本的效果(`color:transparent`也行) ``` -webkit-background-clip:text; color:transparent; /* -webkit-text-fill-color:transparent; */ ```  ### 值 background-position值支持1~4个值，2个值是标准用法，多的两个值一般是在使用关键字值时对关键字值进行**修饰** 这1~4个值可以是具体数值，也可以是百分比值，还可以是left、top、right、center和bottom等关键字 >ie8ie8以下值支持2个值 ``` background-position:left bottom; //支持关键字 background-position:bottom left; //可交换 background-position:0% 100%; //支持百分比 background-position:left 元素的高度px //支持px;可混用 ``` 以上情况就是2个值的使用方式，他们的效果是等价的 除此之外，我们也可以**只**使用一个值 ``` background-position:left; ``` 此时等价于 ``` background-position:left center; ``` So，必须有2个值，省略的话就认为是center(50%) 除此之外也有用到3~4个值的情况，此时一般是对使用的关键字值进行修饰 ``` background-position:left 100px top 100px; ```  #### 关于百分比值 ``` background-position:left 100% top; ``` 并不会让背景图片超出容器  这是因为背景图的位置是按照如下公式计算的 ``` positionX = (容器的宽度-图片的宽度) * percentX; positionY = (容器的高度-图片的高度) * percentY; ``` >[danger] 即使值是一个负值，也是按照上面的公式计算  (设置`center，center`会发现和我们预想的不一样，这是因为center也是按照百分比值进行计算的，也就是按照剩余空间进行计算) ## background-attachment 默认情况下， 页面滚动时，宿主元素随之滚动，其内的图片背景当然得也会和宿主元素**一起**滚动。 但如果将值置为`fixed`，那么背景图片的表现就会像position:fixed一样（不会随着页面滚动而滚动）， 此时背景图片就相当于给视口设置，背景图片会在视口上横竖平铺，**且**只会平铺一个视口大小（不论原宿主元素的大小是多大或多小） 但背景图的可见范围只有宿主元素那么大（就像扣了一个洞）  So，一般我们只会给html或则body元素这样设置 ## background-repeat 默认为横竖平铺 支持的值有：`repeat`、`repeat-x`、`repeat-y`、`no-repeat` ## background-color 不存在background-image时，就会显示background-color的设置  ## background-size ### 默认值auto 也就是图片原本的宽高 ### 数值和百分比值 数值和百分比值默认需要两个值，但也可以只设置一个值，那么另外一个值就会为auto，也就是按照图片原本的宽高比等比例计算求出这个值。  除此之外百分比值是**相对**于**宿主元素**而不是图片本身  ### cover 将背景图片**放大**（或缩小），以铺满整个容器。这种方法很大可能会导致图片失真。 手动测试以后，貌似发现不是失真（或则说失真的意思其实是模糊？），而是截取？  #### cover和center background-size:cover常用来配合background-position:center来制作满屏背景效果 ### contain 保持图片本身比例，将背景图**缩放**（或放大）到宽度或高度正好适应所定义背景容器的区域。  ## background-break 仅firefox，详见手册 ## 多背景 多个背景之间用`,`分隔，并且一个宿主元素background-color只能存在一个 ``` backround:[background-image]|[background-position][/background-size]|[background-repeat]|[background-attachment]|[backgorund-clip]|[background-origin],* ```