css3系列之详解background

css3系列之详解background
background
background 的⼏个属性回顾⼀下，⽽且还有css3 的⼏个属性。

-----------------------------------------------------------------------------------------------------------------
background-color:
设置背景颜⾊⽀持单词，⼗六进制正整数 #ff0 rgb rgba hsl hsla transparent
background-image:
设置⼀张图⽚，或者多张背景图⽚
⼀般的话，也没有⼈使⽤background-image 来放两张图⽚，在⽹络不好的情况下，有可能图⽚显⽰不出来，那么我们不能留个空位给⽤户看吧。

所以，这个时候，你可以再设置多⼀张图⽚，⽤来，第⼀张图⽚显⽰不出来的时候占位
background-repeat:
设置图⽚是否平铺，和平铺的效果
参数：
repeat-x repeat-y repeat no-repeat 这⼀⾏值，只能设置⼀个。

round space 这⼀⾏值，可以设置⼀个或两个第⼀个值代表横向，第⼆个值代表纵向。

如果只设置了⼀个值，那么这个值会应⽤于横向和纵向 默认值是：repeat 表⽰在横向，和纵向都平铺
round：
当背景图像不能以整数次平铺时，会根据情况缩放图像。

也就是说，如果图⽚平铺的⼤⼩不能再添加⼀个图⽚进去，会压缩，或者拉伸其他图⽚。

记得这个 round 会拉伸，或者压缩图⽚就⾏， space,他不会拉伸图⽚，但是有空⽩区域
space
不够填充的地⽅，有空⽩区域，但是不会拉伸图⽚。

background-position:
根据容器来定位图⽚的位置。

默认值是：0% 0% ，第⼀个值设置 left 第⼆个值设置 top。

如果只设置⼀个值，第⼆个值默认是 center 可以接受定位第⼆张图⽚，第三张图⽚的写法，只需要加个，号例如： background-position: 0 0 , 10px 10px
background-attachment：
定义滚动时背景图像相对于谁固定
参数：
scroll：其实很像 position: 的 fixed 效果。

看下⾯的 gif 图就知道啦。

local：也很像 position：的 absolute 。

也是观看下⾯的 gif图啦。

还有⼀个参数， fixed。

他会根据浏览器的窗⼝定位。

所以下⾯的设置，我把位置调到了刚好在div 容器⾥⾯。

来看⼀下他的效果吧
background-origin：
从哪⾥开始显⽰背景图⽚。

说的是，从 border 还是 padding 还是 content 呢。

默认值是 padding
参数：border-box padding-box content-box 从什么地⽅开始显⽰图⽚
background-clip：
从哪⾥截掉图⽚。

跟上⾯⼀样，不过默认的是 border
参数：border-box padding-box content-box text 从什么地⽅截掉图⽚。

text(是webkit独有的)
其实呢，造成这种效果，是因为平铺造成的，所以把平铺设置成 no-repeat 看看，然后你就会惊奇的发现，上左两条边框⾥⾯没有东西，但是下右边框⾥⾯有东西。

还有最后⼀个值： text这个值呢，只有webkit内核的浏览器可以使⽤。

搭配 text-fill-color(也只有webkit内核的浏览器有) 使⽤。

参数：50% 50% (px)，根据⾃⾝的需求设置。

auto: 背景图⽚的真实⼤⼩(默认值)
cover: 将背景图⽚等⽐例缩放到完全覆盖容器⼤⼩。

有可能背景图⽚⼤⼩会超出容器。

contain：将背景图⽚等⽐例缩放到宽度或⾼度与容器相等的⼀边。

背景图⽚⼀定会在⾥⾯，不会超出。

但是有可能宽或⾼不够出现空⽩区域什么意思的，看看下⾯的例⼦：。