背景图片学习总结

background

添加颜色的两种写法

  
    background:red;
    background-color:red;
    

大小

  
     .bg1{background-size: 100% 50%;}
     宽度保持原图大小,高度百分之50%
     我估计正常使用也是等比缩小或放大,不会像这样失真的

  
            .bg2{background-size: cover;}
            /*在等比不失真的前下,将div装满,放不下的地方会隐藏*/
            /*这个还是比交常用的方法!!*/   
            
            

  
            .bg3{height:900px;width:300px;background-size: contain;}
            
            contain是将整装背景图片全部展示在div 里,自动调整大小,以能完整展示!!!

背景图片为了铺满进行重复-repeat

  
    /*y轴重复*/
    body
    {
        background-image:url('paper.gif');
        background-repeat:repeat-y;
    }

  
    
    /*x轴重复*/
    body
    {
        background-image:url('paper.gif');
        background-repeat:repeat-x;
    }

  
  ​

  
    .{.starbackground-image:url(images/star.png);background-repeat:no-repeat;}只显示一个图标   
           repeat-x;  水平轴重复      (不一定每一张图片都完整显示)
           repeat-y;  垂直轴重复      (不一定每一张图片都完整显示)
           round;     背景每一张都完整显示,通过综小图片来进行微调
           space      背景每一张都完整显示,通过增大空白来进行微调

.star{.starbackground-image:url(images/star.png)}默认重复铺开

  
  bg{background-size: contain;}  原比例刚好能放进云, 我是真心实意最大化在有限区域内展示这张图片的时候
                       cover;     原比例填满-一般应用在有一个大空间,我只想要有一个什么背景,一个风景,不在乎能不能完整屏示的时候,就用cover属性!

背景图片高级的"铺"的方式

spac

round

背景图片展示位置的控制-background-position

重要的集成图片-雪碧图

由于雪碧图(也就是集成图片)的应用,这个属性变得很有用,很重要.可以有效的减少图片的加载数量

  
   雪碧图-集成图片
        将多个小图片用一张大图加载出来,然后通过background-position属性在正确的位置显示出来!!
    
            background-position: 36px -47px;
            后面的两个参数代表了从哪个位置开始加载这张图片,不用非常明确的云记这张雪碧图的位置,只要在浏览器工具里实时的调整就可以了!!!tip

  
    .bg{background-position: -10px -30px}
    常用来调整集成图显示位置
    .bg{background-position: left center}
    水平靠左,垂直居中

如何进行集成图片的位置调整?

这种评星级的图案居然也是用集成图做的,妙用啊,

  
    background-position:bottom left; 
    background-position:left top
    background-position:left center
    background-position:left bottom
    background-position:right top
    background-position:right center
    background-position:center top
    background-position:center center
    background-position:center bottom
    
    总的来说就是 left right bottom top center 五个单词的组合

  
    #star{
        background: color url(src) no-repeat fixed  center /cover;

复合写法

背景图片的复合参数相关写法注意事项

图片与滚动条的关系-fixed!!fixed粘在上面的意思