CSS3-背景原点、背景裁剪

background-origin 用于设置背景图像相对于什么位置来定位（背景图的起点）。

语法：

background-origin: padding-box|border-box|content-box;

属性值	作用
border-box	背景相对于元素边框来定位；从 border 区域（含border）开始显示背景图像
padding-box	背景相对于内边距来定位（默认）；从 padding 区域（含padding）开始显示背景图像
content-box	背景相对于内容来定位；从 content 区域开始显示背景图像

相对于边框：

CSS:

div {
    width: 200px;
	height: 200px;
	padding: 20px;
	margin: 10px;
	background-color: skyblue;
	border:10px dashed gray;
	background-image: url(images/bg.jpg);
	background-repeat: no-repeat;
	  /* 相对于边框定位 */
	background-origin: border-box;
}

HTML:

<div></div>

在这里插入图片描述
相对于内边距：

/* 相对于内边距定位 */
background-origin: padding-box;

在这里插入图片描述
相对于外边距：

/* 相对于内边距定位 */
background-origin: content-box;

在这里插入图片描述
background-clip 该属性用于设置背景的裁剪区域

属性值	作用
border-box	从border区域（不含border）开始向外裁剪背景。(默认)
padding-box	从padding区域（不含padding）开始向外裁剪背景
content-box	从content区域开始向外裁剪背景

div {
	width: 200px;
	height: 200px;
	padding: 20px;
	margin: 10px;
	background-color: skyblue;
	border:10px dashed gray;
	/* border 区域开始裁剪 */
	background-clip: border-box;
}