css 之 background (一): 背景与盒模型之间的关

两个比较重要的属性: background-origin与background-clip
background-clip: border-box | padding-box | content-box
默认值是border-box
background-clip 定义了背景的绘制区间(图片或颜色), 是否延伸到边框下面。

background-origin: padding-box | border-box | content-box
默认值是padding-box
background-origin 规定了背景图片(background-image)的原点位置的背景相对区域.

他们共同决定了background的绘图区域.

background-origin只对background-image生效;background-clip对图片和背景色均生效

    .demo {
        width: 60px;
        height: 60px;
        border: 20px dashed #2196f3;
        background-color:#9c27b0;
        padding: 20px;
    }

image.png

下面做一些变更:

.demo {
        width: 60px;
        height: 60px;
        border: 20px dashed #2196f3;
        background-color:#9c27b0;
        padding: 20px;
        background-clip: content-box
    }

image.png

对于background-image:情况会更复杂一些.

    .demo {
        width: 60px;
        height: 60px;
        border: 20px dashed #2196f3;
        background-image:url('http://www.qq1234.org/uploads/allimg/150602/8_150602171754_2.jpg');
        background-repeat: no-repeat;
        padding: 20px;
        background-origin: padding-box;
        background-clip: content-box
    }

image.png
这里实际上background-origin失效了,原因是----origin定义的起始点"超出了"clip定义的绘图区域,所以以clip为准

另一个例子:

    .demo {
        width: 60px;
        height: 60px;
        border: 20px dashed #2196f3;
        background-image:url('http://www.qq1234.org/uploads/allimg/150602/8_150602171754_2.jpg');
        background-repeat: no-repeat;
        padding: 20px;
        background-origin: content-box;
        background-clip: padding-box
    }

image.png

情况又正常了吧~