前端基础学习之背景裁剪（background-clip）

以往写页面，若要给一个有padding的盒子内容填充背景，通常做法就再加了一个div…(汗哒哒，dom冗余，还是基础知识积累不够啊…) 今天刚好看见这个裁剪的用法，记录一下子。

1.background-origin

规定 background-position 属性相对于什么位置来定位。

值	描述
border-box	背景图像相对于边框盒来定位
padding-box	背景图像相对于内边距框来定位
content-box	背景图像相对于内容框来定位

2.background-clip

规定背景的绘制区域

值	描述
border-box	背景裁剪到边框盒
padding-box	背景裁剪到内边距框
content-box	背景裁剪到内容框

• 现在有一个宽高300px，padding50px，border10px的div。使用了box-sizing:border-box之后，实际内容盒子的宽高为180px。现在不设置background-origin和background-clip，给这个div设置一个大小180px的背景图。如下图：
  

    <style>
        div{
            width: 300px;
            height: 300px;
            padding: 50px;
            border: 10px dashed #39BE93;
            box-sizing: border-box;
            /*background-color: #1E9B34;*/
            background-image: url("img/fengche.png");
            background-repeat: no-repeat;
            background-size: 180px 180px;
        }
    </style>

• 设置background-origin: border-box。如下图：
  （很明显这个背景图和边框线有重叠的地方）

• 设置background-origin: padding-box。如下图：
  （和没有设置是一样。即默认就是padding-box）

• 设置background-origin: content-box。
  （这个才是实现在内容盒子内添加背景）

• 同样的盒子换张图，设置background-origin: content-box，不改变背景图片的大小background-size.此时再看背景图是撑满整个div的。如下图：
  
• 这样的情况下如果只想显示内容的背景图，就可以设置background-clip: content-box;
  （这个例子好似不太恰当，最合适的应该是精灵图，给内容部分显示某一块的小图之后，padding部分其实是会显示精灵图上的其余部分的，这个时候用裁剪的属性就很合适）。这里就简单记录一下子。