背景样式属性
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>