bg-origin属性及bg-clip属性。

background-origin属性:

background-origin属性指定了背景图像的位置区域。

content-box、padding-box和border-box区域内可以放置背景图像。

 案例：

/* background-origin 属性 */
        
        .div_7 {
            width: 400px;
            height: auto;
            border: 10px solid rgba(255, 0, 0, 0.263);
            background: url(img/flower_small.gif) no-repeat;
            padding: 20px;
            float: left;
            background-origin: padding-box;
            /*图片在内边距*/
        }
        
        .div_8 {
            width: 400px;
            height: auto;
            border: 10px solid rgba(255, 0, 0, 0.263);
            background: url(img/flower_small.gif) no-repeat;
            padding: 20px;
            background-origin: border-box;
            float: left;/*图片在边框上*/
        }
        
        .div_9 {
            width: 400px;
            height: auto;
            border: 10px solid rgba(255, 0, 0, 0.263);
            background: url(img/flower_small.gif) no-repeat;
            padding: 20px;
            background-origin: content-box;
            float: left;/*图片在内容上*/
        }

效果：

 background-clip属性：

  css3中background-clip背景剪裁属性是从指定位置开始绘制。

   实例：

/*  background-clip: ;属性 */
        
        .div_10 {
            width: 400px;
            height: auto;
            border: 10px dotted black;
            background: greenyellow;
            padding: 20px;
            float: left;
        }
        
        .div_11 {
            width: 400px;
            height: auto;
            border: 10px dotted black;
            background: greenyellow;
            padding: 20px;
            float: left;
            background-clip: padding-box;
        }
        
        .div_12 {
            width: 400px;
            height: auto;
            border: 10px dotted black;
            background: greenyellow;
            padding: 20px;
            float: left;
            background-clip: content-box;
        }

效果：