背景颜色渐变

css属性

1 .background-size:

1 .指定背景图像的大小
2 .length:设置背景图片的宽度和高度，如果给出一个值，第二个自动设置为auto
3 .百分比：相对于当前的大小进行自适应，100%，100%.完全填满背景。以父元素的百分比设置高度
4 .cover:保持横纵比将图像缩放到完全覆盖背景区域:如果背景图片尺寸大于所属元素尺寸，则背景图片不进行此方法，正常显示，超出部分被隐藏,如果背景图片尺寸小于所属元素尺寸，则背景图片进行等比放大，图片不会出现变形，直至完全覆盖所属元素，超出部分被隐藏。优点是背景图片全部覆盖所属元素区域，缺点是超出部分会被隐藏
5 .contain:保持横纵比将图像缩放到适合覆盖背景区域的大小：对背景图片进行等比放大或者缩小，直至背景图片完完整整的被显示出来，优点是图片不会出现变形，同时背景图片会被完全展示出来，缺点是当所属元素的宽高比与背景图片的宽高比不同时，会出现背景留白。

2 .background-postion:

1 .设置背景图像的起使位置
2 .使用这个的前提是必须使用background,background-image属性定义了背景
3 .属性值：left,top,center,right,bottom:完全可以使用百分比替代
4 .百分比：第一个值是水平位置，第二个值是垂直位置。左上角是0%，0%，右下角是100%，100%，如果是只有一个值，另一个值是50%.默认值为0%，0%
5 .单位值：0px 10px.可以混合上面两个使用
6 .该属性不受对象的padding对象的影响

3 .代码

    
    
    
    
    


    

        

            先设置一个渐变背景，给出很多颜色
        
        

            放大背景，然后突出一种颜色
        
        

            移动背景的位置，达到变化颜色的效果