html+css---background(背景属性)

background(背景)

###### background-color(背景颜色)

###### background-image(背景图片)

                格式：

    background-image:url(./././img)

###### background-repeat(背景图片的平铺)

                属性值：no-repeat；

                                repeat-x；

                                repeat-y；

                                repeat；

###### background-position(背景图片的定位)

                属性值： 20px 20px;

                                10% 10%;

                                center center;

                                left;一个值时，水平自动剧中

###### background-attachment(背景图片的固定)

                        attachment(附加设备/附件)

                属性值：scroll(默认值)

                               fixed(固定) 固定在浏览器窗口

###### background-size（背景图片的大小）

                属性值：100px 100px;

                                100px 100px;

                                cover;    图像完全覆盖,有区域无法显示

                                contain;    把图像扩展最大尺寸，铺不满，就会**留白**

定位和大小用“/”隔开······定位在前，大小在后

    background:red url() no-repeat position/size attachment

###### background-origin：指定背景图像的定位区域，通常与位置配合使用

可选值：

          padding-box：从内边距开始计算

         content-box：背景图片的偏移量从内容区计算

        border-box：从边框开始计算偏移量

###### background-clip（背景图片覆盖区域）

                属性值：border-box    默认值

                                padding-box    不包含边框

                                content-box    不包含外边距

###### 线性渐变(linear-gradient)

例：background:linear-gradient(red **10%**,green **90%**)

linear-gradient(**to right**,red 10%,green 90%)

linear-gradient(**to bottom right**,red 10%,green 90%)

linear-gradient(**0 deg**,red 10%,green 90%)

###### 径向渐变(radial-gradient)

格式：background:radial-gradient(60% 40%,shape(渐变的形状),closest-side,颜色 颜色）

shape（渐变的颜色）有·······**ellipse**(椭圆--默认值)/**circle**(圆形)

closest-side···最近边

farthest-side···最远边

closest-corner···最近角

farthest-corner···最远角