困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。 background-origin:padding|border|content

该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了。

background-clip:border|padding|content

该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。

background-origin-clip

    background-origin: content-box;   //logo位置
    background-clip: content-box;   //灰色背景

html代码

<div class="wrap"><span>padding</span>
    <div class="content">content</div>
</div>

css代码

.wrap {
    width:220px; 
    border:20px dashed #000; 
    padding:20px; 
    font-weight:bold; 
    color:#000; 
    background:#ccc url(http://www.fuyuan.me/wp-content/uploads/2015/01/logo.png) no-repeat; 
    background-origin: content-box;
    background-clip: content-box;
    position: relative;
}
.wrap span { 
    position: absolute; 
    left:0; 
    top:0;
}
.content {
    height:80px; 
    border:1px solid #333;
}