哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
志同道合的小伙伴跟我一起学习交流哦！
第二阶段 CSS308 CSS背景及应用1 背景颜色图片及其平铺
背景颜色background
CSS可以添加背景颜色和背景图片，以及来进行图片设置。
格式与用法如下：
div {
width: 500px;
height: 500px;
background-color: pink;
background-image: url(images/l.jpg);
background-repeat: no-repeat;
}
sublime小技巧：“bgc tab”=background-color
其他的以此类推
2 背景位置（一）
背景位置position
语法：
background-position: length length;
background-position: position position;
background-position: left top;/*默认的是在左上角*/
background-position: bottom right;/*方位名词没有顺序，谁都在前都可以*/
background-position: left;/*如果方位名词只写一个，另一个默认为center*/
参数：
length：百分数丨由浮点数字和单位标识符组成的长度值。请参阅长度单位position:top center bottom left right
3 背景位置（二）
精确单位：
background-position: 10px 30px;
/*第一个值一定是x坐标 第二个值一定是y坐标*/
background-position: 10 center;
/*混搭*/
4 魔兽背景图片
想让图片往上移，可以是负数值
background-image: url(images/ms.jpg);
background-position: center -25px;
实际上用的最多的就是居中对齐
5 背景附着图
语法：
background-attachment: scroll、 fixed;
参数：
scroll：背景图像是随对象内容滚动
fixed：背景图像固定
说明：
设置或检索背景图像是随对象内容滚动还是固定的。
6 背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background背景颜色-背景图片地址-背景平铺-背景滚动-背景位置background:transparent url（image jpg） repeat-y scroll 50%0：
background: #000 url(images/lol.jpg) no-repeat fixed center 100px;
黑色 图片地址 不平铺 水平居中 垂直100像素
后面的两个位置值是不能分开的
7 背景半透明
CSS3支持背景半透明的写法语法格式是
background: rgba(0, 0, 0, 0.7);
最后一个参数是 alpha透明度取值范围0-1之间
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
同样，可以给文字和边框透明都是rgba的格式来写。
8 背景缩放（一）
通过 background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a）可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）
background-size:50% ;
背景图片设置为原来的50%大小
9 背景缩放（二）
b）设置为 cover时，会自动调整缩放比例，保证图片始终填充满背景区堿，如有溢出部分则会被隐藏。
C）设置为 contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
10 多背影图片
以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。
1 一个元素可以设置多重背景图像。
2 每组属性间使用逗号分隔。
3 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
4 为了避免背景色将图像盖住，背景色通常都定义在最后一组上
div {
height: 300px height:300px;
background: url(images/l.jpg) no-repeat left top,
url(images/3.jpg) no-repeat right bottom hotpink
11 凹凸文字效果
12 王者荣耀导航栏（一）
13 王者荣耀导航栏（二）
文本的装饰
text-decoration通常我们用于给链接修改装饰效果
使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中
看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。
本章已结束，下篇文章将分享《09 CSS三大特性》小伙伴们不要错过哟！
,
