background-clip 和 background-origin 对图片的 “裁剪”？

　background-clip 与 background-origin 两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。虽然两者看上去实现的效果差不多，但是他们两个的原理是不同的。

   background-origin定义的是背景位置（background-position）的起始点；而background-clip是对背景（图片和背景色）的切割 ； 参数都是:  content-box  padding-box  border-box

 

background-origin 图片左上角对着原点 ( 0,0 ) 坐标

#main{
    width:220px;
    border:20px dashed #000;
    padding:30px;
    /*padding:20px;*/
    font-weight:bold;
    color:#000;
    background:#ccc url(http://images.cnblogs.com/cnblogs_com/silvercell/980633/o_LOGO_1x.png) no-repeat;
    background-origin: content-box;
    /*background-clip: content-box;*/
    background-position: 10px 10px;
    /*position: relative;*/
  }

 

#main{   width:220px;    border:20px dashed #000;    padding:30px;    /*padding:20px;*/    font-weight:bold;    color:#000;    background:#ccc url(http://images.cnblogs.com/cnblogs_com/silvercell/980633/o_LOGO_1x.png) no-repeat;    background-origin: content-box;    /*background-clip: content-box;*/    background-position: 10px 10px;    /*position: relative;*/  }