1.背景颜色(background-color)
语法:
background-color:颜色值;
默认值是透明的 transparent
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg {
width: 600px;
height: 500px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="bg">
</div>
</body>
</html>
样例:
2.背景图片(background-image)
语法:
background-image: url();
默认值是none 无背景图
注意:url内不建议加引号
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg {
width: 600px;
height: 500px;
background-color: cadetblue;
background-image: url(images/3.jpg);
}
</style>
</head>
<body>
<div class="bg">
1111111111111111111
</div>
</body>
</html>
样例:(注意背景图是在底层的,文字在其上面)
3.背景平铺(background-repeat)
属性值:
1.no-repeat 不平铺
2.repeat-x x轴横向平铺
3.repeat-y y轴纵向平铺
4.repeat 平铺(默认)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg {
width: 600px;
height: 500px;
background-color: cadetblue;
background-image: url(images/3.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="bg">
1111111111111111111
</div>
</body>
</html>
样例:
4.背景位置(position)重点
语法:
background-position : length
background-position : position
注意:
1.必须先指定background:image属性
2.position后面是x坐标和y坐标,可以使用方位名词或者精准单位
3.如果只指定了一个方位名词,另一个值默认居中,为50%
4.如果只制定了一个数值,那该数值用于x坐标,另一个默认为y坐标,默认居中
5.如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left top 和 top left 效果一样
6.如果指定两个值,精确单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标
代码:(图片位置:右上)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg {
width: 600px;
height: 500px;
background-color: cadetblue;
background-image: url(images/3.jpg);
background-repeat: no-repeat;
/* background-position: x坐标 y坐标; */
/* x在右 y在上 则图片在右上 */
background-position: right top;
}
</style>
</head>
<body>
<div class="bg">
1111111111111111111
</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>Document</title>
<style>
.bg {
width: 600px;
height: 500px;
background-color: cadetblue;
background-image: url(images/3.jpg);
background-repeat: no-repeat;
/* background-position: x坐标 y坐标; */
/* x在右 y在上 则图片在右上 */
/* background-position: right top; */
/* x居中 y居中 则图片居中 */
background-position: center center;
}
</style>
</head>
<body>
<div class="bg">
1111111111111111111
</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>Document</title>
<style>
.bg {
width: 600px;
height: 500px;
background-color: cadetblue;
background-image: url(images/3.jpg);
background-repeat: no-repeat;
/* background-position: x坐标 y坐标; */
/* x在右 y在上 则图片在右上 */
/* background-position: right top; */
/* x居中 y居中 则图片居中 */
/* background-position: center center; */
/* 水平靠左 垂直居中 */
background-position: left center;
}
</style>
</head>
<body>
<div class="bg">
1111111111111111111
</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>Document</title>
<style>
.bg {
width: 600px;
height: 500px;
background-color: cadetblue;
background-image: url(images/3.jpg);
background-repeat: no-repeat;
/* background-position: x坐标 y坐标; */
/* x在右 y在上 则图片在右上 */
/* background-position: right top; */
/* x居中 y居中 则图片居中 */
/* background-position: center center; */
/* 水平靠左 垂直居中 */
/* background-position: left center; */
/* x :10px y :50px */
background-position: 10px 50px;
}
</style>
</head>
<body>
<div class="bg">
1111111111111111111
</div>
</body>
</html>
样例:
通常背景图片为超大图片时需要水平居中,垂直靠上
background-position: center top;
5.背景附着(背景滚动还是固定)
语法:background-attachment : scroll | fixed
scroll 滚动、背景图像随着内容滚动(默认)
fixed 固定
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-image: url(images/king.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</body>
</html>
样例:(字可滚动 背景一直不动)
6.背景简写
举例:background : #ccc url(image/1.jpg) no-repeat fixed center top ;
最好按此顺序简写 不写则为默认选项
7.背景透明(CSS3 ->低于ie9版本不支持 常用)
代码:
最后一个参数是alpha 透明度的意思 取值范围在0~1之间
backgroud-color: rbga(0,0,0,0.3);
注意:
0.3通常会简写为.3
背景半透明指的是盒子半透明,里面的内容(如:图片)不受任何影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.alpha {
width: 300px;
height: 300px;
background-color: rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div class="alpha"></div>
</body>
</html>