CSS3学习之background-origin和background-clip区别

background-origin

• 用于决定background-position计算的参考位置，即对背景图片设置起始点。
  
• 取值有：border,padding,content（可以理解为原理和图片缩放差不多??）
  
• 栗子（仅在chrome浏览器做的简单测试）：

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

<style type="text/css">
	div[class*="div"]{
		width: 200px;
		height: 200px;
		padding: 10px; //颜色和背景一样,橙色
		margin-left: 10px;
		border: 30px dashed pink;
		display: inline-block;
		background-color: orange;
		background-image: url(img/1.jpg);
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.div1{			
		-webkit-background-origin: border; //将背景图片起始位置设为border起始的左上角
		background-origin: border;
	}

	.div2{
		-webkit-background-origin: padding;//将背景图片起始位置设为padding起始的左上角
		background-origin: border;
	}

	.div3{
		-webkit-background-origin: content;//将背景图片起始位置设为内容区域的左上角
		background-origin: border;
	}
</style>

复制代码

2.background-clip

• 设置背景可以覆盖到什么范围（背景在哪些区域可以显示），得到的结果是不完整的背景，原理和截图差不多。
• 但要注意的是，background-clip不影响背景开始绘制的位置，切割的是对这个容器背景的切割（包括图片和颜色）.
• 栗子：

依此是div0到div5:

<div class="div0"></div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>

<style type="text/css">
	div[class*="div"]{
		width: 200px;
		height: 200px;
		padding: 10px; //颜色和背景一样,橙色
		margin-left: 10px;
		border: 20px dashed pink;
		display: inline-block;
		background-color: orange;
		background-image: url(img/1.jpg);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	
	.div0{
		-webkit-background-origin: border;	//背景图片在border左上角开始绘制，并且没有设置background-origin属性	
	}
	
	.div1{			
		-webkit-background-origin: border;//背景图片在border左上角开始绘制
		-webkit-background-clip: content;//但背景只能在content开始被显示
	}
	
	.div2{
		-webkit-background-origin: border;//背景图片在border左上角开始绘制
		-webkit-background-clip: padding;//但背景只能在padding区域开始被显示
	}
	
	.div3{
		-webkit-background-origin: padding;//背景图片在padding左上角开始绘制
		-webkit-background-clip: content;//但背景只能在content开始被显示
	}
	
	.div4{
		-webkit-background-origin: padding;//背景图片在padding左上角开始绘制
		-webkit-background-clip: border;//背景设为从border开始被显示，看上去像没起作用一样
	}


	.div5{
		-webkit-background-origin: content;//背景图片在内容区域左上角开始绘制
		-webkit-background-clip: padding;
		//背景设为从padding开始被显示，所以padding区域的背景橙色还是会被显示出来，而border区域的背景色则被“裁剪掉”，
		//这也证明了，上面所说的“background-clip切割的是对这个容器背景的切割（包括图片和颜色）”
	}
</style>
复制代码

转载于:https://juejin.im/post/5affe45bf265da0b776ff453