CSS干货2-背景图起始位置 background-origin

上一篇文章“CSS干货1-透明边框”，提到了 background-clip ，有三个属性值可以选择，border-box | padding-box | content-box

让我不得不提到另外一个背景相关的属性  background-origin ，因为它也有相同的三个属性值，border-box | padding-box | content-box。以至于很多人把 background-clip 和  background-origin ，傻傻分不清。

 background-origin规定 background-position 属性相对于什么位置来定位。（这句解释来自 http://www.w3school.com.cn/cssref/pr_background-origin.asp ）

简单说来， background-origin 就是规定了背景图的起始位置。

它默认值为 padding-box。

1、 border-box ，表示背景图像从 border 区域的左上角开始显示。如果我们设置边框设置透明度后，背景图像和边框相叠加，透过边框可以看见背景图像。

.box{
            width: 300px;
            height: 150px;
            margin: 100px; 
            background: url("images/bg3.jpg") no-repeat;
            background-origin: border-box;
            padding: 20px;
            border:30px rgba(0,0,0,0.5) solid;
        }

2、padding-box ，默认值，表示背景图像从 padding区域的左上角开始显示。

注意：半透明黑色边框下，看不到背景图了。

3、content-box 表示背景图像从 content区域的左上角开始显示。

注意：边框内部的白色部分是 padding区域。

不难看出，如果当内边距为0时，padding-box 与 content-box 的效果相同。