0403 背景颜色、背景图片、背景图片平铺、背景图片位置

1 页面背景

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title></title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         body{
14             height: 100%;
15             /*background-color: skyblue;*/
16             background: url("../img/背景.jpg");
17 
18             /*background-size: 1366px 768px;*/
19 
20             background-repeat: no-repeat;
21             /*background-repeat: repeat-x;*/
22             /*background-repeat: repeat-y;*/
23         }
24     </style>
25 </head>
26 
27 <body>
28 
29 </body>
30 </html>
页面背景源代码

 

2 背景图片平铺

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title></title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         div{
14             height: 600px;
15             background-image: url("../img/x.png");
16             background-repeat: repeat-x;
17         } 
18         
19     </style>
20 </head>
21 
22 <body>
23     <div>
24         hello world
25     </div>
26 </body>
27 </html>
背景图片平铺源代码

 

3 背景图片的位置

　　作用：图标的制作

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title></title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         #box1{
14             height: 200px;
15             background-image: url("../img/study.ico");
16             background-repeat: no-repeat;
17             background-position: 100px 0px;
18             border: 1px solid red;
19         } 
20         #box2{
21             height: 50px;
22             width: 50px;
23             /*border: 1px solid blue;*/
24             background-image: url("../img/icon_sprite.png");
25             background-position: -100px -120px;
26         }
27         
28     </style>
29 </head>
30 
31 <body>
32     <div id="box1">
33        
34     </div>
35     <div id="box2"></div>
36 </body>
37 </html>
背景图片位置源代码

 

posted @ 2017-05-10 16:40  寻渝记  阅读(147)  评论(0)    收藏  举报