1.设置页面的背景颜色
body{
margin:0px;
background-color:lightskyblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的CSS</title>
</head>
<body>
<h1>我的CSS web页!</h1>
<p>Hello World!</p>
</body>
</html>
2.设置不同元素的背景颜色
1 h1{
2 background-color:royalblue;
3 }
4 div{
5 background-color:silver;
6 }
7 p{
8 background-color:honeydew;
9 }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的CSS</title>
</head>
<body>
<h1>CSS background-color实例!</h1>
<div>
该本文插入在div元素中。
<p class="green">该段落有自己的背景颜色。</p>
我们任然在同一个div中。
</div>
</body>
</html>
3.设置一个图像最为页面的背景
div {
margin: 0px;
width: 200px;
height: 200px;
background-image: url('fun.jpg');
}
div h1 {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的CSS</title>
</head>
<body>
<div>
<h1>Hello World!</h1>
</div>
</body>
</html>
4.如何在水平方向重复背景图像
div {
background-image: url('fun.jpg');
background-repeat: no-repeat;
}
<body>
<div>
<h1>Hello World!</h1>
</div>
</body>
5.如何定位背景图像
div {
background-image: url('fun.jpg');
background-repeat: no-repeat;
margin-right: 200px;
}
<body>
<div>
<h1>Hello World!</h1>
</div>
</body>
6.一个固定的背景图片(这个图片不会随着页面的其余部分滚动)
div {
background-image: url("fun.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
right: 2000px;
}
<body>
<div>
<p>背景图片是固定的。尝试向下滚动页面</p>
<p>背景图片是固定的。尝试向下滚动页面</p>
<p>背景图片是固定的。尝试向下滚动页面</p>
<p>背景图片是固定的。尝试向下滚动页面</p>
<p>背景图片是固定的。尝试向下滚动页面</p>
<p>背景图片是固定的。尝试向下滚动页面</p>
<p>背景图片是固定的。尝试向下滚动页面</p>
<p>背景图片是固定的。尝试向下滚动页面</p>
<p>背景图片是固定的。尝试向下滚动页面</p>
<p>背景图片是固定的。尝试向下滚动页面</p>
</div>
</body>
7.声明背景属性
body{
background: url("fun.jpg") no-repeat right top;
margin-right: 200px;
}
<body>
<h1>Hello World!</h1>
<p>背景图片只显示一次但它位置离文本比较远</p>
<p>在这个例子中我们添加了一个右边距,所以背景图像</p>
</body>
8.高级的背景例子
<body>
<div class="contains">
<div class="content">
<h1>Hello World!</h1>
<p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>
</div>
</body>
body {
margin-left: 200px;
background-image: url("fun.jpg");
}
div.contains {
text-align: center;
}
div.contains div.content {
border: 1px solide skyblue;
margin-right: auto;
margin-top: auto;
width: 75%;
text-align: left;
background-color: darkorange;
padding: 8px;
}