开发者学堂课程【零基础学前端 HTML+CSS ：背景图像】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5133
背景图像
内容介绍
一．什么是 CSS 背景图像
二．CSS 属性定义背影效果
三．常见的背景效果代码
一．什么是 CSS 背景图像
CSS 背景图像的设定，在 CSS 样式表中单独提出了一个背景图像属性的集合，背景图像的颜色，背景图像的图片，背景定位，还有背景的伸缩。
二．CSS 属性定义背影效果:
1. background-color 背景颜色
2. background-image 背景图片
3. background-repeat 背景重复
4. background-attachment 背景滚动
5. background-position 背景定位
三．常见背景效果代码：
1.body {background-color:#bOc4de;}/*背景颜色改变*/
2.body {background-image:url( 'paper.gif’);}/*背景图像*/
3.background-repeat:repeat-x;/*水平平铺*/
4.background-repeatino-repeat;/*不平铺*/
5.background-position:right top;/*背景位置右上*/
背景图像一般写在 body 里面,在 background-repeat 背景重复
中，repeat-x 是图像横轴重复，反之-y则是纵轴重复。
<!DOCTYPE html><html>
<head lang=" en">
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: blue;
//设置背景颜色为蓝色
background-image:ur1("images/Penguins.jpg");
//设置背景的图片
background-repeat:repeat-x;
//横轴与纵轴之间重复的形式
background-attachment:fixed;
//
background-position:center;
//设置背景图像定位居中
}
</style>
</head>
<body>
<br><br><br>3123213213123123<br><br>321321321312<br><br>3213213213123<br>
</body>
</html>
效果展示图:
在代码中是写在 body 之中，整个 body 之中都变成了背景，背景的图片根据图像的链接，images/Penguins.jpg 中企鹅的图像就默认被平铺到画面之中。背景的重复 background-repeat 也可以进行设置，常用的是不重复，默认的是重复，背景图像是在背景颜色之上，选择 no-repeat 是不重复。横轴的重复是 repeat-x,纵轴的重复是 repeat-y，都是比较常见的设置图像的模式。attachment 滚动，鼠标经过时，内容会显示在上面。背景的定位 position 的定位，默认的图像都是居左，center 是居中。
