背景和渐变

background连写

例如

background-image:linear-gradient(transparent 25%,#fff 22%,                            #fff 9%,transparent 30%),linear-gradient(90deg,#33cc99 25%,#fff 25%,
#fff 20%,#33cc99 30%);background-size: 30px 30px;

注解：
1、顺序无关
2、同时设置位置和尺寸需要用position/size方式
3、为元素设置背景相关属性，使用子属性的写法，设置多个用连写

渐变

1.线性渐变-从上到下

#grad{
background-image:linear-gradient(#e66456,#9198e5)
}

2.从左到右

#grad{
height:200px;
background-image:linear-gradient(to right,red,yello);
}

3.对角

#grad{
height:200px;
background-image:linear-gradient(red,yello,green);
}

4.多色
#grad {
background-image: linear-gradient(red, yellow, green);
}
5.透明度
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
6.重复线性渐变
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}