css3-3 css3背景样式
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>