背景样式属性
background-color：背景图像（默认平铺）
比如：#ff0000、red.rgb(255,0,0)
background-image：url(图像路径和名称);
比如：background-image: url(../../lesson_01/img/list-img.jpg);
background-repeat：背景图像是否重复
对应的值：
repeat：默认值，平铺
repeat-x：水平平铺
repeat-y：垂直平铺
no-repeat：不平铺，显示一张原图片
比如：background-repeat: repeat-y;
background-position：背景图像起始位置
对应的值： 水平位置(left center right) 垂直位置(top center bottom)
英文单词：center center
百分比：x% y%
固定值：xpos ypos
background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。
对应的值：
scroll (滚动)
fixed (固定)
background：简写属性，同时设置多个样式，个数不定，顺序不定，每个属性直接用空格隔开
比如：
url(1.ipga) no-repeat center center fixed
注意：
1.background-color用于给元素设置背景颜色，但是前提是这个元素要么有内容，要么有宽度和高度
设置背景颜色
语法： background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景颜色</title>
<style type="text/css">
.box{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
背景图片
语法： background-image: url(…/…/lesson_01/img/list-img.jpg);
url中写图片的路径，可以是网上图片链接，也可以是本地的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-image: url(../../lesson_01/img/list-img.jpg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
图片太小的话，会重复平铺
背景图片的平铺
语法：
background-repeat: repeat-x; 水平平铺，横着重复背景图片
background-repeat: repeat-y; 垂直平铺，竖着重复背景图片
background-repeat: no-repeat; 不重复，就是仅显示一张背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片平铺</title>
<style type="text/css">
.box{
border: 1px solid #f00;
width: 200px;
height: 200px;
background-image: url(../../lesson_01/img/list-img.jpg);
/*background-repeat 平铺*/
/*background-repeat: repeat-x;*/
background-repeat: repeat-y;
/*background-repeat: no-repeat;*/
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
平铺案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片平铺</title>
<style type="text/css">
.box{
border: 1px solid #f00;
width: 100000px;
height: 1000px;
background-image: url(../img/IMG_0425.JPG);
/*background-repeat 平铺*/
background-repeat: repeat-x; /*让背景图片只在水平方向平铺*/
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
看看静英夫妇
图片背景的位置
语法：
background-position: center center; 第一个center表示水平方向上居中，第二个center表示垂直方向上居中，
水平参数：left center right
垂直参数：bottom center top
background-position: 100px 100px; 第一个100px表示背景图片的左上角那个点距离他左边的盒子的距离为100px，第二个100px表示 背景图片的左上角那个点距离他上面的盒子的距离为100px
background-position: 50% 50%; 这个和center一个意思
background-position: 100px top; 这是混合使用，背景图片左侧距离边界100px,y轴方向是top，靠上
大家可以都试一下，看下就明白了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片的位置</title>
<style type="text/css">
.box{
border: 1px solid #f00;
width: 3000px;
height: 1000px;
margin-right: auto;
margin-left: auto;
background-image: url(../img/IMG_0425.JPG);
/*background-repeat 平铺*/
background-repeat: no-repeat; /*让背景图片只在水平方向平铺*/
/*英文单词设置位置*/
/*background-position: center center;*/
/*设置固定位置*/
/*background-position: 100px 100px;*/
/*百分比表示位置*/
/*background-position: 50% 50%;*/
/*混合使用方式*/
background-position: 100px top;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
背景图片是否固定
语法：background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。
对应的值：
scroll (滚动)
fixed (固定)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片是否固定</title>
<style type="text/css">
.box{
color: #00f;
border: 1px solid #f00;
width: 1000px;
margin-right: auto;
margin-left: auto;
background-image: url(../img/IMG_0425.JPG);
background-repeat: no-repeat;
/*设置背景图片固定*/
/*background-attachment: fixed;*/
background-attachment: scroll;
}
</style>
</head>
<body>
<div class="box">
发帖的家长叫周婷（化名），家住广东省汕尾市城区某小区。文本随便粘，多弄点。
</div>
</body>
</html>
设置fixed，就是滑动网页窗口的时候，背景图片没有动（始终固定在左上角）；如果设置为scroll ，如果文本过多，图片不是特别大，滑到最下面，就看不见图片了。
background属性可以简写
之前的有些属性可以一起设置
语法：background: #ccc url(…/img/IMG_0425.JPG) no-repeat center center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>background</title>
<style type="text/css">
.div1{
width: 1000px;
height: 600px;
border: 1px solid #f00;
margin-right: auto;
margin-left: auto;
background: #ccc url(../img/IMG_0425.JPG) no-repeat center center;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
背景样式综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景样式属性综合案例</title>
<style type="text/css">
body{
font-size: 12px; /*字体大小*/
color: #f60; /*文本颜色*/
}
.box{
width: 300px;
border: 1px solid #00f;
margin-right: auto; /*右外边距为auto*/
margin-left: auto; /*左外边距为auto*/
}
.box h2{
height: 35px;
line-height: 35px;
color: gold;
}
.box ul li{
/*去除li前面的项目符号*/
list-style: none;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
/*给每一个li标签设置一个背景图片*/
background-image: url(../img/bg.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px;
/*左内填充，盒子里面的内容到左边边框线的距离，就称为左内填充*/
}
</style>
</head>
<body>
<div class="box">
<h2>新闻列表</h2>
<ul>
<li><a href="#">刘亦菲一出场我就恋爱了</a></li>
<li><a href="#">刘亦菲一出场我就恋爱了</a></li>
<li><a href="#">刘亦菲一出场我就恋爱了</a></li>
<li><a href="#">刘亦菲一出场我就恋爱了</a></li>
<li><a href="#">刘亦菲一出场我就恋爱了</a></li>
<li><a href="#">刘亦菲一出场我就恋爱了</a></li>
</ul>
</div>
</body>
</html>
