【创作赢红包】CSS的background常用属性集合

background各项属性

background-attachment	background-origin
background-clip	background-position
background-color	background-repeat
background-image	background-size

-image和-color的区别

background-image：liner-gradiner（to top，颜色，颜色）

              1. 颜色可以换成透明transparent，线性颜色渐变

                2.并且background-image永远在background-color上面

                3.background-image：不能设置为纯色值

background-clip（指定背景图像的绘画区域）

        控制内容背景图像的大小。

background-clip：border-box（默认值）
                 padding-box
                 content-box

bordre-box：边框下可以存在背景图像

padding-box：边框下的背景图像被剪切

content-box：剩下内容的背景图片，其余背景图片都被剪切

        

background-origin：控制背景图片的起始位置 

        

background-origin：padding-box；
                    content-box；
                    border-box；

        padding-box（默认值） 指定图片由padding开始，贴着边框border做起始位置

        content-box：背景图片出现在内容区域开始展示

        border-box：背景图片直接在边框区域展示      

 backgroun-attachment：

        控制背景图片是否会随着页面滑动而改变

scorll（默认）随着页面滚动而滚动
fixed         页面滚动的时候，背景图片不移动
inherit       继承

      background-position：定位布局

background-postion: x% y%；
                    xpx ypx；
                    bottom xpx right tpx 

        bottom xpx，为距离bottom底部距离多少px像素

background-repeat；

repeat	全方位重复背景图片，直到铺满整个页面
repeat-x	水平重复
repeat-y	垂直重复
no-repeat	不重复

background-size：

        

cover	保持图像纵横比列，放大到四边都碰到边框
contain	保持图像纵横比列，放到直到一边碰到边框