background属性
属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
- background-color 设置背景颜色
- background-image 设置背景图片地址
- background-repeat 设置背景图片如何重复平铺
- background-position 设置背景图片的位置
- background-attachment 设置背景图片是固定还是随着页面滚动条滚动
background-color
- background-color属性用来为元素设置背 景颜色。
- 需要指定一个颜色值，当指定了一个颜色 以后，整个元素的可见区域都会使用这个 颜色作为背景色。
- 如果不设置背景颜色，元素默认背景颜色 为透明，实际上会显示父元素的背景颜色
background-image
- background-image可以为元素指定背景 图片。
- 和background-color类似，这不过这里使 用的是一个图片作为背景。
- 需要一个url地址作为参数，url地址需要指 向一个外部图片的路径
- 例如：
- background-image: url(1.jpg)
background-position
- background-position用来精确控制背景 图片在元素中的位置。
- 可以通过三种方式来确定图片在水平方向 和垂直方向的起点。
- 关键字：top right bottom left center
- 百分比
- 数值
- background:url(location_bg.jpg) -110px -150px 向左移动110，向下移动150
- background-position right top 图片在右上角（center center是居中）
- 用数字来确定位置个人感觉和定位正好相反
background-repeat
- background-repeat用于控制背景图片的 重复方式。
- 如果只设置背景图片默认背景图片将会使 用平铺的方式，可以通过该属性进行修改。
- 可选值：
- repeat：默认值，图片左右上下平铺
- no-repeat：只显示图片一次，不会平铺
- repeat-x：沿x轴水平平铺一张图片
- repeat-y：沿y轴水平平铺一张图片
background-attachment
- background-attachment用来设置背景图 片是否随页面滚动。
- 可选值：
- scroll：随页面滚动
- fixed：不随页面滚动
简写属性
样式 的顺序没有要求。
- background: green url(1.jpg) no-repeat center center fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
.box1{
width: 1024px;
height: 724px;
margin: 0 auto;
/*设置背景样式*/
background-color: #bfa;
/*
使用background-image来设置背景图片
语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色
*/
background-image: url(img/1.png);
/*
background-repeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x， 背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
*/
background-repeat: repeat-y;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="css/bgstyle.css"> -->
</head>
<body>
<div class="box1"></div>
</body>
</html>
