背景三种方式
名字 red black
十六进制 #FFF0
hsla(30,100%,100%,0.3);
可以不要a(透明度)
rgba(255,0,0,0.3)
线性渐变-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:右下到左上
多段渐变linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%);
渐变画网格在这里插入代码片
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可以用多个背景进行叠加
背景图
height: 900 px;
background: red url ( . / test. png) ;
background- repeat: no- repeat;
background- position: center top;
background- size: 100 px 50 px;
1. background可以一起指定颜色和图片
2. repeat: no-repeat repeat-x repeat-y repeat
3. pisition: 先左右 后上下,可以为正负
4. size:调整的是图的大小
base64