css3-3 css3背景样式

一、总结

一句话总结：网站页面上的小图标集成在一张大图上面，是因为降低服务器负载，网站上的那些图片都可以下载下来，源码那里，或者工具那里。

1、background:#ccc url('xs.png') no-repeat fixed 50% 50%;中的最后两个参数是什么意思？

背景图片的偏移位置，表示距上和距左各百分之五十

2、为什么各种网站设置的时候把所有的小图标集成在一张图上面？

降低服务器请求次数，降低负载，当然这样也会导致必须下载了这张图页面才能正常显示。

3、各种网站设置的时候把所有的小图标集成在一张图上面，怎么访问单一的图？

百度：背景，然后偏移

4、百度页面将css和js写在页面内部而不是外部的原因？

降低服务器请求次数，降低负载

5、background缩写的各个参数是什么意思？

12             background:#ccc url('xs.png') no-repeat fixed 50% 50%;

二、css3背景样式

1、相关资料

背景:
1.background-color
2.background-image
3.background-repeat
4.background-attachment
5.background-position

2、代码

background缩写形式

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family:微软雅黑;
 9         }
10 
11         body{
12             background:#ccc url('xs.png') no-repeat fixed 50% 50%;
13         }
14     </style>
15 </head>
16 <body>
17     <div>
18         <h1>linux is very much!linux is very much!</h1>    
19         <h1>linux is very much!linux is very much!</h1>    
20         <h1>linux is very much!linux is very much!</h1>    
21         <h1>linux is very much!linux is very much!</h1>    
22         <h1>linux is very much!linux is very much!</h1>    
23         <h1>linux is very much!linux is very much!</h1>    
24         <h1>linux is very much!linux is very much!</h1>    
25         <h1>linux is very much!linux is very much!</h1>    
26         <h1>linux is very much!linux is very much!</h1>    
27         <h1>linux is very much!linux is very much!</h1>    
28         <h1>linux is very much!linux is very much!</h1>    
29         <h1>linux is very much!linux is very much!</h1>    
30         <h1>linux is very much!linux is very much!</h1>    
31         <h1>linux is very much!linux is very much!</h1>    
32         <h1>linux is very much!linux is very much!</h1>    
33     </div>
34 </body>
35 </html>