css3中background-clip和background-origin的区别

时间 2019-12-07

标签 css3 css background clip origin 区别栏目 CSS 繁體版

原文原文链接

在css3中，background-clip和background-origin实现的效果有时候是很类似的，因此有时候会很容易就把这两个属性弄混。css

background-clip是从盒子的内边框开始显示图片，而后根据你设置的属性来决定裁剪的范围，并不会影响图片开始显示的位置；
html

而background-origin不会影响图片的显示范围，它只是单纯控制图片开始显示的那个位置，即图片左上角坐标的点。css3

下面用一段简单的代码来测试一下，首先测试background-clip测试

<pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				float: left;
				border: 10px dashed red;
				width: 100px;
				height: 100px;
				margin: 20px 20px;
				padding: 50px;
				background: gray url(img/bg.png) no-repeat;
			}
			p{
				font-size: 20px;
				color: #fff;
			}
			.border{
				background-clip: border-box;
			}
			.padding{
				background-clip: padding-box;
			}
			.content{
				background-clip: content-box;
			}
			
		</style>
	</head>
	<body>
		<div class="border">
			<p>border</p>
		</div>
		<div class="padding">
			<p>padding</p>
		</div>
		<div class="content">
			<p>content</p>
		</div>
	</body>
</html>

能够看到，图片上的白点的位置是没有发生改变的，只是在背景上的范围被裁剪了而已，因此background-clip属性影响的图片在背景上显示的范围大小而不会影响它处在背景上的位置。那么接下来看background-origin属性url

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				float: left;
				border: 10px dashed red;
				width: 100px;
				height: 100px;
				margin: 20px 20px;
				padding: 50px;
				background: gray url(img/bg.png) no-repeat;
			}
			p{
				font-size: 20px;
				color: #fff;
			}
			.border{
				background-origin: border-box;
			}
			.padding{
				background-origin: padding-box;
			}
			.content{
				background-origin: content-box;
			}
			
		</style>
	</head>
	<body>
		<div class="border">
			<p>border</p>
		</div>
		<div class="padding">
			<p>padding</p>
		</div>
		<div class="content">
			<p>content</p>
		</div>
	</body>
</html>

你们看图片中白点的位置已经发生了变化，由于此时背景图片显示的起始位置已经发生了变化，左上方没有显示图片并非由于被裁剪，而是由于起点位置在更下面的地方，因此那里没有显示图片而已。code