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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。