CSS实例

CSS背景

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title> 
 6 <style>
 7 body
 8 {
 9     background-color:#b0c4de;
10 }
11 </style>
12 </head>
13 
14 <body>
15 
16 <h1>我的 CSS web 页!</h1>
17 <p>你好世界！这是来自 runoob 菜鸟教程的实例。</p>
18 
19 </body>
20 </html>
1、设置页面的背景颜色
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title> 
 6 <style>
 7 h1
 8 {
 9     background-color:#6495ed;
10 }
11 p
12 {
13     background-color:#e0ffff;
14 }
15 div
16 {
17     background-color:#b0c4de;
18 }
19 </style>
20 </head>
21 
22 <body>
23 
24 <h1>CSS background-color 实例!</h1>
25 <div>
26 该文本插入在 div 元素中。
27 <p>该段落有自己的背景颜色。</p>
28 我们仍然在同一个 div 中。
29 </div>
30 
31 </body>
32 </html>
2、设置不同元素的背景颜色
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title> 
 6 <style>
 7 body 
 8 {
 9     background-image:url('paper.gif');
10     background-color:#cccccc;
11 }
12 </style>
13 </head>
14 
15 <body>
16 <h1>Hello World!</h1>
17 </body>
18 
19 </html>
3、设置一个图像作为页面的背景
 1 RUNOOB.COM
 2  
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta charset="utf-8"> 
 7 <title>菜鸟教程(runoob.com)</title> 
 8 <style>
 9     body {background-image:url('bgdesert.jpg');}
10 </style>
11 </head>
12 ​
13 <body>
14 <h1>Hello World!</h1>
15 <p>该文本不容易被阅读。</p>
16 </body>
17 ​
18 </html>
19 
20 
21  
22 Copyright © 2013-2018菜鸟教程
4、错误的背景图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title> 
 6 <style>
 7 body
 8 {
 9     background-image:url('gradient2.png');
10     background-repeat:repeat-x;
11 }
12 </style>
13 </head>
14 
15 <body>
16 <h1>Hello World!</h1>
17 </body>
18 
19 </html>
5、如何在水平方向重复背景图像
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title> 
 6 <style>
 7 body
 8 {
 9     background-image:url('img_tree.png');
10     background-repeat:no-repeat;
11     background-position:right top;
12     margin-right:200px;
13 }
14 </style>
15 
16 </head>
17 
18 <body>
19 <h1>Hello World!</h1>
20 <p>背景图片不重复，设置 position 实例。</p>
21 <p>背景图片只显示一次，并与文本分开。</p>
22 <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
23 </body>
24 
25 </html>
6、如何定义背景图像
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title>
 6 <style>
 7 body 
 8 {
 9 background-image:url('smiley.gif');
10 background-repeat:no-repeat;
11 background-attachment:fixed;
12 }
13 </style>
14 </head>
15 
16 <body>
17 <p>背景图片是固定的。尝试向下滚动页面。</p>
18 <p>背景图片是固定的。尝试向下滚动页面。</p>
19 <p>背景图片是固定的。尝试向下滚动页面。</p>
20 <p>背景图片是固定的。尝试向下滚动页面。</p>
21 <p>背景图片是固定的。尝试向下滚动页面。</p>
22 <p>背景图片是固定的。尝试向下滚动页面。</p>
23 <p>背景图片是固定的。尝试向下滚动页面。</p>
24 <p>背景图片是固定的。尝试向下滚动页面。</p>
25 <p>背景图片是固定的。尝试向下滚动页面。</p>
26 <p>背景图片是固定的。尝试向下滚动页面。</p>
27 <p>背景图片是固定的。尝试向下滚动页面。</p>
28 <p>背景图片是固定的。尝试向下滚动页面。</p>
29 <p>背景图片是固定的。尝试向下滚动页面。</p>
30 <p>背景图片是固定的。尝试向下滚动页面。</p>
31 <p>背景图片是固定的。尝试向下滚动页面。</p>
32 </body>
33 
34 </html>
7、一个固定的背景图片（这个图片不随页面的其余部分滚动）
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title>
 6 <style>
 7 body 
 8 {
 9 background-image:url('smiley.gif');
10 background-repeat:no-repeat;
11 background-attachment:fixed;
12 }
13 </style>
14 </head>
15 
16 <body>
17 <p>背景图片是固定的。尝试向下滚动页面。</p>
18 <p>背景图片是固定的。尝试向下滚动页面。</p>
19 <p>背景图片是固定的。尝试向下滚动页面。</p>
20 <p>背景图片是固定的。尝试向下滚动页面。</p>
21 <p>背景图片是固定的。尝试向下滚动页面。</p>
22 <p>背景图片是固定的。尝试向下滚动页面。</p>
23 <p>背景图片是固定的。尝试向下滚动页面。</p>
24 <p>背景图片是固定的。尝试向下滚动页面。</p>
25 <p>背景图片是固定的。尝试向下滚动页面。</p>
26 <p>背景图片是固定的。尝试向下滚动页面。</p>
27 <p>背景图片是固定的。尝试向下滚动页面。</p>
28 <p>背景图片是固定的。尝试向下滚动页面。</p>
29 <p>背景图片是固定的。尝试向下滚动页面。</p>
30 <p>背景图片是固定的。尝试向下滚动页面。</p>
31 <p>背景图片是固定的。尝试向下滚动页面。</p>
32 </body>
33 
34 </html>
8、声明背景属性
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title> 
 6 <style>
 7 body
 8 {
 9     margin-left:200px;
10     background:#5d9ab2 url('img_tree.png') no-repeat top left;
11 }
12 
13 .container
14 {
15     text-align:center;
16 }
17 
18 .center_div
19 {
20     border:1px solid gray;
21     margin-left:auto;
22     margin-right:auto;
23     width:90%;
24     background-color:#d0f0f6;
25     text-align:left;
26     padding:8px;
27 }
28 </style>
29 </head>
30 
31 <body>
32 <div class="container">
33 <div class="center_div">
34 <h1>Hello World!</h1>
35 <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>
36 </div>
37 </div>
38 </body>
39 </html>
9、高级的背景例子

 

背景属性的解释

 

posted @ 2018-11-13 12:33  stalla  阅读(109)  评论(0)    收藏  举报