非布局样式-背景

1. 背景三种方式
   • 名字 red black
   • 十六进制 #FFF0
   • hsla(30,100%,100%,0.3); 可以不要a（透明度）
     • 0-360的色域
     • 饱和度
     • 亮度
     • 透明度
   • rgba(255,0,0,0.3)
2. 线性渐变-webkit-linear-gradient(left, red, green);
   • 标准写法linear-gradient(to right, red, green);
     left top bottom
   • 角度写法linear-gradient(45deg, red, green);
     0deg：下到上 180deg：上到下
     90deg：左到右 360deg：下到上
     45deg：左下到右上 135deg：左上到右下
     225deg：右上到左下 315deg：右下到左上
3. 多段渐变linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%);
   • 50%指颜色开始的位置
4. 渐变画网格在这里插入代码片

background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
            linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
            background-size: 100px 100px;

1. background-size设置背景图片大小，浏览器会进行平铺
2. background可以用多个背景进行叠加

5. 背景图

            height:900px;
            background: red url(./test.png);
            background-repeat: no-repeat;
            background-position: center top;
            /*background-position: 20px 30px;*/
            background-size:100px 50px;

1. background可以一起指定颜色和图片
2. repeat: no-repeat	repeat-x repeat-y repeat
3. pisition: 先左右 后上下，可以为正负
4. size：调整的是图的大小

6. base64