css背景

1 <!DOCTYPE html>                                        
  2 <html lang="en">                                       
  3 <head>         
  4     <meta charset="UTF-8">                             
  5     <title></title>                                    
  6     <style>    
  7     /*         
  8     background-image设置背景图片                       
  9         -可以同事设置背景图片和背景颜色                
 10         -如果背景的图片小于元素的大小，则背景图片会自动在元素中平铺
    并且铺满元素
 11         -如果背景图片大一元素大小，将会有一部分无法显示
 12         -如果两者一样大，则会正常显示                  
 13     background-image:url("/path")                      
 14     background-repeat:用来设置背景的重复方式           
 15         可选值：                                       
 16             -默认值x轴y轴两个方向都重复                
 17             -repeat-x 沿着x轴方向重复                  
 18             -repeat-y 沿着y轴方向重复                  
 19             -no-rapeat 背景图片不重复                  
 20     background-position 用来设置背景图片的位置         
 21         设置方式：                                     
 22             通过top left right bottom center几个来进行设置
 23             通过偏移量来指定背景图片的位置：           
 24                 水平方向偏移量，垂直方向偏移量         
 25     background-position:left center;                   
 26     background-position:100px 100px;                   
 27                
 28     background-clip设置背景的范围                      
 29         可选值：                                       
 30             -border-box 默认值 背景会出现在边框的下面  
 31             -padding-box 背景不会出现在边框，只会出现在内容区和内边    距
 32             -content-box 背景只会出现在内容区          
 33     background-origin设置背景图片偏移量计算的原点      
 34         可选值：                                                   
 35             -padding-box默认值，background-position从内边距开始计算
 36             -border-box 背景图片的变量从边框处开始计算 
 37             -centent-box 背景图片的变量从边框处开始计算
 38                
 39                
 40     background-size设置背景图片的大小                  
 41         第一个值设置宽度                               
 42         第二个值设置高度                               
 43         -如果只写一个，则第二个值默认为auto
 44         cover 图片比例不变，将元素铺满                 
 45         content 图片比例不变，将图片在元素中完整的显示出来
 46                
 47                
 48     background-attachment背景图片是否跟随着元素移动    
 49         可选值：
 50             scroll默认值背景图片会跟随着元素移动       
 51             fixed背景会固定在页面中，不会岁元素进行移动
 52                
 53                
 54      */        
 55                
 56     </style>   
 57 </head>        
 58 <body>
笨鸟先飞