CSS3學習之background-origin和background-clip區別

CHIEMINCHAN發表於2018-05-19
CSSS3

background-origin

  • 用於決定background-position計算的參考位置，即對背景圖片設定起始點。
  • 取值有：border,padding,content（可以理解為原理和圖片縮放差不多??）
  • 栗子（僅在chrome瀏覽器做的簡單測試）： origin1.png
<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:

origin2.png
origin3.png
<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>
複製程式碼

相關文章