背景和渐变

背景

背景颜色：background-color，取值：任意的合法颜色或是transparent

注意：背景颜色会填充到元素的内容(width)、内边距(padding)和边框区域(border)

背景图像：background-image，取值url(图像路径)

背景重复：background-repeat，取值repeat(默认值)，no-repeat，repeat-x，repeat-y

背景大小：background-size，

取值：1、background-size:value1px value2px，指定背景图像的宽度和高度，以px为单位

2、background-size:value1% value2%，以当前元素的宽和高的百分百作为背景图像的宽和高，以%为单位

3、background-size:cover，覆盖，将背景图等比放大，直到背景图完全覆盖到元素的所有区域

4、background-size:contain，包含，将背景图等比放大，直到背景图的下边或右边有一个边缘碰到元素为止

背景图片固定：background-attachment，

取值：1、scroll，默认值，滚动，背景图片会随着文档滚动

2、fixed，固定，背景图片不会随着文档滚动，一直保持在固定位置

背景图片定位：background-position，改变背景图像在元素中的默认位置

取值：1、x y，

x：背景图水平偏移距离，取值为正向右偏离，取值为负向左偏离

y：背景图垂直偏移距离，取值为正向下偏离，取值为负向上偏离

2、x% y%

3、关键字：x：left，right，center

y：top，bottom，center

背景综合属性：background

background:color url() repeat attachment position;

注意：如果不设置其中的某个值，将采用默认值

渐变：background-image

线性渐变

background-image:linear-gradient(angle,color-point,color-point,...);

angle：渐变的方向或是角度，to top，to bottom，to left，to right，数字deg

color-point：表示颜色及其颜色出现的位置

red 0% : 开始的时候是红色

blue 25%: 25%的时候变成蓝色

red 0px : 开始的时候是红色

blue 25px: 到25px的位置处，变为蓝色

eg：background-image:linear-gradient(to top,red 0%,blue 30%,yellow 60%)

色标的位置可以省略，省略后每个颜色将平均分配元素区域

径向渐变

background-image:radial-gradient([size at position],color-point,color-point)

size at position：size:表示圆的半径，以px为单位

position:圆心位置，取值可以为 数值，百分比，关键字

1、0px 0px，圆心在元素的左上角

2、50% 50%，圆心在元素的中间

3、bottom left，圆心在元素的左下角

该参数可以省略的，圆心位置在元素的正中间

重复渐变

background-image:repeating-linear-gradient(同线性渐变);

background-image:repeating-radial-gradient(同径向渐变);