开发者学堂课程【CSS 快速掌握：背景样式属性】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9185
背景样式属性
内容介绍
一、background-color
二、background-image
三、background-repeat
属性 |
值 |
含义 |
background-color |
#ff0000、red、rgb(255,0,0) |
背景颜色 |
background-image |
url(图像路径和名称); |
背景图像 |
background-repeat |
repeat repeat-x repeat-y no-repeat |
背景图像是否重复 |
background-position |
center center或x% y%或xpos ypos |
背景图像起始位置 |
background-attachment |
scroll(滚动)、fixed(固定) |
设置背景图像是否固定或者随着页面的其余部分滚动。 |
background |
url(1.jipg) no-repeat center center |
设置背景的简写形式 |
一、background-color
background-color :用于给元素设置背景颜色但是前提这个元素要么有内容，要么有宽度和高度才可以。
范例：
<style type="text/css">
.box{
width : 100px;
height: 10ep×;
background-color: #f00;
}
</style>
</ head>
<body>
<div class="box"></div>
</body>
</ htm1>
二、background-image
background-image 用于给元素设置背景图片︰图片的地址一定放在 url (图片的地址)但是前提这个元素要么有内容，要么有宽度和高度才可以-背景图片默认是平铺的
范例：
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style type="text/css">
.box{
width: 100epx;
height: 1000px:
background-image :uri( ./images/3.jpg）
}
< / style>
< / head>
<body>
<div class="box"></div>
</ body>
</ htm1>
三、background-repeat
background-repeat 是用于设置背景图片是否平铺 repeat (是平铺)、repeat-x (水平方向平铺) repeat-y (垂直方向平铺)、no-repeat (不平铺)
范例1：
<style type="text/css">
.box{
width: 100epx;
height: 100epx;
border: 1px solid #f00;
background-image:url(./images/3.jpg); /*background-repeate*/
background-repeat: no-repeat;/*表示图片是平铺的*/
}
</ style>
</ head>
<body>
<div class=box"></div>
< / body>
</ htm1>
范例2：
<style type="text/css">
.box{
width : 10eepx;
height: 800px;
border : 1px solid #f00;
background-image:url(./images/bg.png)
background-repeat: repeat-x;/*让背景图片只在水平方向进行平铺*/
}
</style>
</ head>
<body>
<div class="box "></div>
</ body>
</ html>
