1.背景颜色(background-color)
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
background-color: red;
}
div {
background-color: blue;
}
</style>
</head>
<body>
<h1>码海无际</h1>
<div>码海无际</div>
</body>
</html>
9_1.png
2.背景图片(background-image)
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 1200px;
height: 800px;
background-color: aqua; /*假设图片丢失，就使用背景颜色*/
background-image: url("img/gsbj.jpg");
}
</style>
</head>
<body>
<div>
码海无际苦作舟<br>
志向高远写春秋
</div>
</body>
</html>
9_2.png
3.背景重复(background-repeat)
background-repeat 有四个属性值：
- repeat：重复（默认值）
- repeat-x：水平重复
- repeat-y：纵向重复
- no-repeat：不重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 1200px;
height: 800px;
background-color: aqua; /*假设图片丢失，就使用背景颜色*/
background-image: url("img/gsbj.jpg");
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
码海无际苦作舟<br>
志向高远写春秋
</div>
</body>
</html>
9_3.png
4.背景位置(background-position)
语法：
- background-position : position || position
- background-position : length || length
参数：
- position : top | center | bottom | left | center | right
- length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 。
说明：
- 设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
- 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 1200px;
height: 800px;
background-color: aqua;
background-image: url("img/gsbj.jpg");
background-repeat: no-repeat;
/*background-position: center center;*/
/* background-position: 20px 150px;*/
background-position: 30% 70%;
}
</style>
</head>
<body>
<div>
码海无际苦作舟<br>
志向高远写春秋
</div>
</body>
</html>
9_4.png
5.背景关联(background-attachment)
参数：
- scroll：背景图像是随对象内容滚动
- fixed：背景图像固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 1200px;
height: 800px;
background-color: aqua;
background-image: url("img/gsbj.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
码海无际苦作舟<br>
志向高远写春秋
</div>
</body>
</html>
9_5.png
6.背景简写(background)
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1200px;
height: 800px;
background: aqua url("img/gsbj.jpg") no-repeat fixed 200px 200px;
}
</style>
</head>
<body>
<div>
码海无际苦作舟<br>
志向高远写春秋
</div>
</body>
</html>
9_6.png
7.综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 800px;
height: 700px;
background-image: url("img/gsbj.jpg");
background-repeat: no-repeat;
font-size: 40px;
padding-left: 220px;
padding-top: 200px;
font-weight: bold;
font-family: 宋体;
text-shadow: #000000 5px 5px 5px; /*CSS3*/
}
</style>
</head>
<body>
<div>
码海无际苦作舟<br>
志向高远写春秋
</div>
</body>
</html>
9_7.png
