第六课 背景与渐变

1. 二进制,十进制与十六进制

• 二进制 : 只有0和1 (如11代表4 ; 1110代表15; 1024=2¹⁰ ; 512=2⁹ ; 256=2⁸ ; )
• 十进制 : 即0~9表示的计数方式,日常所用
• 十六进制 : 0 1 2 3 4 5 6 7 8 9 a b c d e f

---

2. 颜色

颜色的表示有三种方法:

① 关键字

• 包括十七个标准色与130个混合颜色共计147种
• 十七个标准色:

color	颜色
red	红色
orange	橙色
yellow	黄色
green	绿色
aqua	青色
blue	蓝色
purple	紫色
black	黑色
white	白色
gray	灰色
fuchsia	紫红色
silver	银色
lime	黄绿色
maroon	红褐色
navy	海军蓝
olive	橄榄色
teal	淡青色

② rgb或rgba 三原色 / hsl 或 hsla ( 书写同rgb )

rgb(0 ~ 255 , 0 ~ 255 , 0 ~ 255)
三个数值分别对应红/绿/蓝

或

rgba(0 ~ 255 , 0 ~ 255 , 0 ~ 255 , 0~1)
这里的a是指透明度,值在0~1之间,比如半透明就是0.5

③ 十六进制

注:我们平常所说的绿色并不是(0,255,0)而是(0,128,0); 
   而(0,255,0)代表的颜色是 lime 黄绿色

---

3. 背景

div{
	 background-color: black;              背景色:黑色
	 background-size: 50%;                 背景大小:50%(于div)
	 background-image: url(tupian.jpg);    背景图片:图片地址
     background-position: top;             背景位置:顶部(默认居中)
	 background-attachment: fixed;         背景关联:静止(不随网页滚动)
	 background-repeat: no-repeat;         背景重复:不重复(不平铺)
}

• 通过position来移动图片位置(看一下图片像素大小,再确定移动距离)
• 位置包括top,botto,left,right,center几个属性
• repeat属性默认是重复(平铺)的
• 以上属性也可以合起来写:
  background:url() 50% top no-repeat ;

---

4. 渐变

① 线性渐变 linear - gradient

• 从左向右,从绿色变成蓝色

div{
	background:linear-gradient(to right,green,blue)
}

• 从坐下到右上,从绿色变成蓝色

div{
	background:linear-gradient(to top right,green,blue)
}

• 还可以角度渐变,-135度从绿到蓝
  角度渐变的规律是正值为顺时针,负值为逆时针

div{
background: linear-gradient(-135deg, green,blue);

② 径向渐变 radial - gradient

background:radial-gradient(ellipse,blue,yellow);