css属性之 background-size origin position

css 背景background-size origin position

1. background-size

   • 在no-repeat情况下，如果容器宽高比与图片宽高比不同
     • cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；
     • contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；
   • 在repeat情况下：cover:与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。
   • 该属性还可以设置百分比或者具体像素值 background-size: length|percentage|cover|contain;

2. background-origin

   属性规定背景图片的定位区域。

image.png

/*在 content-box 中定位背景图片：*/
    div
    {
        background:url(bg_flower.gif);
        background-repeat:no-repeat;
        background-size:100% 100%;
        -webkit-background-origin:content-box; /* Safari */
        background-origin:content-box;
    }

3. background-clip

   规定背景的绘制区域。

   • 语法
     background-clip: border-box|padding-box|content-box;
   • border-box 背景被裁剪到边框盒。
   • padding-box 背景被裁剪到内边距框。
   • content-box 背景被裁剪到内容框。

4. 代码展示

  
  
  



  
 content: 500 * 500 padding: 20px; border:10px;