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; }