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

系统管理员 2022-07-17 04:29 186阅读 0赞

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

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

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

下面用一段简单的代码来测试一下，首先测试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>

![Image 1][]

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

<!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>

![Image 1][]

大家看图片中白点的位置已经发生了变化，因为此时背景图片显示的起始位置已经发生了变化，左上方没有显示图片并不是因为被裁剪，而是因为起点位置在更下面的地方，所以那里没有显示图片而已。

[Image 1]: