1. 背景图片
(1) background-image 设置背景图片
语法： background-image:url(相对路径)
特点：
- 如果背景图片 大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
- 可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色。一般情况下设置背景图片时都会同时指定一个背景颜色
/*设置元素大小*/
width: 300px;
height: 300px;
/*设置背景颜色*/
background-color: #bfa;
/*设置背景图片*/
backgoroung-image:url(img/1.png);(2) background-repeat 设置背景图片的重复方式
可选值：
* repeat 默认值，背景图片会双向重复（平铺）
* no-repeat 背景图片不会重复，有多大就显示多大
* repeat-x 背景图片沿水平方向重复
* repeat-y 背景图片沿垂直方向重复background-repeat: repeat-y;(3) background-position 调整背景图片在元素中的位置
-
可选值：
- 该属性可以使用top left bottom center中的两个值来指定一个背景图片的位置。如 top left 左上， bottom right右下。如果只给出一个值，则第二个值默认是center。
- 也可以直接指定两个偏移量。
-
第一个是水平偏移量
- 如果指定的是一个正值，则图片会向右移动指定的像素
- 如果指定的是一个负值，则图片会向左移动指定的像素
-
第二个是垂直偏移量
- 如果指定的是一个正值，则图片会向下移动指定的像素
- 如果指定的是一个负值，则图片会向上移动指定的像素
background-position: 100px 100px;(4) background-attachment 设置背景图片是否随页面一起滚动
-
可选值：
- scroll 默认值，背景图片随着窗口滚动
- fixed 背景图片会固定在某一个位置，不随页面滚动。背景图片的定位永远相对于浏览器的窗口。
注意： 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其它元素。
body{
background-image: url(img/3.png);
background-repeat: no-repeat;
background-attachment:fixed;/* */
}(5) background 简写属性
- 通过该属性可以同时设置所有背景相关的样式
- 没有顺序要求，也没有数量的要求，不写的样式就使用默认值
<style type="text/css">
.btn {
/*设置高*/
height: 5000px;
/*设置背景颜色*/
background-color: #bfa;
/*设置背景图片*/
background-image: url(btn.png);
/*设置背景图片不重复*/
background-repeat: no-repeat;
/*设置背景图片的位置*/
background-position: center center;
/*设置背景图片不随滚动条滚动*/
background-attachment: fixed;
}
</style>简写，一行代替了上边写法的多行
height: 5000px;
background: #bfa center center url(btn.png) no-repeat fixed; 背景颜色#bfa将不起作用，会使用background的默认值透明色作为背景颜色
background-color: #bfa;
background: center center url(btn.png) no-repeat fixed; 2.按钮练习
可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了。
- 通过background-position 来切换要显示的图片的位置，这种技术叫做图片整合技术(CSS-Sprite).
-
优点：
- 将多个图片整合在一张图片中，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
- 将多个图片整合为一张图片，减小了图片的总大小，提高了请求速度，增加了用户体验。
背景图片：三部分有细微的差别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮练习</title>
<style type="text/css">
.btn:link{
/*设置宽高*/
width: 76px;
height: 27px;
/*设置背景颜色*/
background-color: #bfa;
/*将a元素转换成块元素*/
display: block;
/*设置背景图片*/
background-image: url(btn.png);
/*设置背景图片不重复*/
background-repeat: no-repeat;
}
.btn:hover{
/* 当是hover状态时，向左移动图片*/
background-position: -76px 0px;/*注意正负值*/
}
.btn:active{
/* 当是active状态时，再向左移动图片*/
background-position: -152px 0px;/*注意正负值*/
}
</style>
</head>
<body>
<!-- 创建一个超链接 -->
<a class="btn" href="#"></a>
</body>
</html>结果：
-> 鼠标移入时(图片字体泛白)：
->点击按钮时(图片颜色加深)：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。