css背景（background）
css可以添加背景图片和背景颜色，以及图片设置。
| backgroung-color | 背景颜色 |
|---|---|
| backgroung-image | 背景图片地址 |
| backgroung-repeat | 是否平铺 |
| backgroung-position | 背景位置 |
| backgroung-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性） | - |
| backgroung背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 | - |
背景图片（image）
背景平铺（repeat）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div {
height: 400px;
width: 400px;
background-color: deepskyblue;
background-image: url(images/123.jpg);
background-repeat: no-repeat;/*图片不平铺，平铺了如果尺寸不够的话将会把图片的一部分剪切到空白部分*/
/*repeat还有其他属性： */
/* repeat-x： 背景图像在横向上平铺 */
/* repeat-y： 背景图像在纵向上平铺 */
/* repeat： 背景图像在横向和纵向平铺 */
/* no-repeat： 背景图像不平铺 */
/* round： 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3） */
/* space： 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围，能以整数次填充时，图片能填充几次盒子就会出现几次。（CSS3）*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
image.png
背景位置（position）
background-position: length length
background-position: position position
length: 百分数
position：top center bottom left center right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div {
height: 500px;
width: 500px;
background-color: deepskyblue;
background-image: url(images/123.jpg);
background-repeat: no-repeat;/*图片不平铺，平铺了如果尺寸不够的话将会把图片的一部分剪切到空白部分*/
/*repeat还有其他属性： */
/* repeat-x： 背景图像在横向上平铺 */
/* repeat-y： 背景图像在纵向上平铺 */
/* repeat： 背景图像在横向和纵向平铺 */
/* no-repeat： 背景图像不平铺 */
/* round： 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3） */
/* space： 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围，能以整数次填充时，图片能填充几次盒子就会出现几次。（CSS3）*/
background-position: left top;/*默认是左上角，方位名词无顺序要求，谁在前都行，如果只写一个方位名词，例如：left，那么另外一个词默认是center，图片就会靠左居中显示图片，如果用精确地单位，那第一个值是x坐标，第二个是y坐标。也可以混写background-position: 20px center;*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
image.png
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: #000;
background-image: url(images/ms.jpg);
background-position: center -25px;/*设置位置的精确位置，负值就是向左、向上移动，在这里是沿y轴向上移动25px*/
}
</style>
</head>
<body>
</body>
</html>
背景附着
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: #000;
background-image: url(images/ms.jpg);
background-repeat: no-repeat;
background-position: center -25px;/*设置位置的精确位置，负值就是向左、向上移动，在这里是沿y轴向上移动25px*/
background-attachment: fixed;/*默认值是scroll：滚动的，意思是图片随着滚动条拉动也一起滚动，但是设置为fixed之后，背景图片固定不动，拉动滚动条只有文字会动，背景图不会动*/
}
p {
color: peachpuff;
font-size: 20px;
}
</style>
</head>
<body>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
</body>
</html>
背景简写
background属性的值书写顺序没有强制标准，建议如下写：
background：背景颜色、背景图片地址、背景平铺、背景滚动、背景位置。
div {
background: transparent url(image.jpg) repeat-y scroll 50% 0;
}
---->
div {
background: #000 url(image.jpg) no-repeat scroll center -25px;
}
背景透明（css3）
div {
background: rgba(0, 0, 0, 0.3)
}
文字和盒子的半透明效果一样都是用rgba。
背景缩放（css3）
通过background-size设置背景图片的尺寸，参数设置如下：
（1）可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）
（2）设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域如有溢出部分会被隐藏。
（3）设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
background-image: url(images.jpg); background-size: 300px 100px; /* background-size: contain;*/ /*background-size: cover; */
多背景（css3）
以逗号分隔可以设置多背景，可以用于自适应布局 做法就是 用逗号隔开就好
- 一个元素可以设置多重背景图像
- 每组属性间使用逗号分隔
- 如果设置的多重背景图之间存在交集（重叠），前面的背景图会覆盖后面的。
- 为了避免背景色将图像覆盖，背景色通常都定义在最后一组上。
div {
width: 500px;
height: 500px;
background: url(1.jpg) no-repeat left top, url(2.jpg) no-repeat left bottom, url(3.jpg) no-repeat right top #aaa;
/*第一个背景放在最上面，最后一个背景放在最下面。 仅最后一个背景允许拥有背景色*/
}
凹凸文字效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: #ccc;
}
div {
color: #cccccc;
font: 700 80px "微软雅黑";
}
div:first-child { /*水平位置 垂直位置 模糊距离 阴影颜色*/
text-shadow: 3px 3px 3px #000, -1px -1px 1px #fff;
}
div:last-child { /*水平位置 垂直位置 模糊距离 阴影颜色 凹下和凸起正相反，包括正负*/
text-shadow: 1px 1px 1px #fff, -3px -3px 3px #000;
}
</style>
</head>
<body>
<div>凸起效果</div>
<div>凹下效果</div>
</body>
</html>
image.png
导航栏案例
文本的装饰：
text-decoration 通常用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认，定义标准文本 |
| underline | 定义文本下的一条线，就是下划线，链接默认自带 |
| overlinr | 定义文本上的一条线， |
| line-through | 定义穿过文本的一条线，就是删除线 |
下例：
（1）text-align: center; 和 line-height: 50px;要一起用才能做到水平垂直居中，text-align: center; 是让文本水平居中， line-height: 50px;是让行高等于盒子高度，这样就能实现文字垂直居中，两个一起写就能实现水平垂直居中。
（2）:hover 选择器用于选择鼠标指针浮动在上面的元素。 提示：:hover 选择器可用于所有元素，不只是链接。
（3）text-decoration的默认值是none，但是a是链接，默认自带下划线，值设为none之后他会取消下划线。
（4） :hover 选择器用于选择鼠标指针浮动在上面的元素。
提示：:hover 选择器可用于所有元素，不只是链接。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: #000;
}
a {
width: 200px;
height: 50px;
/*background-color: orange;*/
display: inline-block;/*行内元素转为行内块；*/
text-align: center;/*文字水平居中*/
line-height: 50px;/*在一行盒子内，设定行高等于盒子高度，就可以使文字垂直居中，需要和text-align配合使用，没有text-align的话，文字只会靠左垂直居中*/
color: #fff;
font-size: 22px;
text-decoration: none;/*取消文本装饰（去掉下划线）*/
}
a:hover {/* :hover 选择器用于选择鼠标指针浮动在上面的元素。 提示：:hover 选择器可用于所有元素，不只是链接。*/
background: url(images/h.png) no-repeat;
}
</style>
</head>
<body>
<a href="#">专区说明</a>
<a href="#">申请资格</a>
<a href="#">兑换奖励</a>
<a href="#">下载游戏</a>
</body>
</html>
image.png
