| background-color | 背景颜色 |
|---|---|
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性） | background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
背景平铺（repeat）
语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数：
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
背景位置(position)
background-position: left top; 默认的是左上角。
1.方位名词。方位名词没有顺序，谁在前都可以。如果方位名词只写一个，另外一个默认为center。
2.精确单位。第一值一定是x坐标，第二个值一定是y坐标。可以为负值。
3.混搭 center 10px 水平居中的 垂直是 10px。 10px center 水平10px 垂直是 居中。
背景附着
background-attachment : scroll | fixed
scroll: 背景图像是随对象内容滚动
fixed : 背景图像固定
背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
同样， 可以给 文字和边框透明 都是 rgba 的格式来写。
color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
背景缩放(CSS3)
我们插入的图片 img 直接通过 width 和height 设置就可
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
background-size: 100px; 我们尽量只改一个值，防止缩放失真扭曲。另一个值会随着等比例缩放。
background-size: 50%; 把背景图片缩放为原来的一半大小
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
如果图片的高度或者 宽度 有一个和盒子一样大了，就不在缩放。这样的好处就是保证了图片的完整。不会有缺失的一部分， 但是会有部分裸露。
多背景(CSS3)
每组属性间使用逗号分隔。
如果设置的多重背景图之间存在着重叠关系，前面的背景图会覆盖在后面的背景图之上。
为了避免背景色将图像盖住，背景色定义在最后一组上。
background-image: url('images/gyt.jpg'),url('images/robot.png');
凹凸文字
页面中左上角是原坐标，向右是x轴正向，向下是y轴正向。
字体和背景的颜色需要相同#000黑色，#fff白色。text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;
凸起 style=“text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;”
凹下style=“text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;”
文本的装饰（导航栏案例）
text-decoration 通常我们用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 文本默认。 |
| underline | 链接默认带的下划线 |
| overline | 文本上有一条线 |
| line-through | 删除文本中间的一条线 |
一点小案例的知识点：
display: inline-block; 把a链接行内元素转换为行内块元素
line-height: 50px; 若只有一行文字，我们设定行高等于盒子的高度，就可以使文字垂直居中
text-decoration: none; 取消链接的下划线
a:hover { background: url(images/h.png) no-repeat; } 鼠标经过 给我们的链接添加背景图片
