CSS3新屬性Background-Origin和Background-Clip的詳解-css教學-PHP中文網

首頁

web前端

css教學

CSS3新屬性Background-Origin和Background-Clip的詳解

不言

Nov 07, 2018 pm 01:44 PM

在這篇文章中，我們將討論CSS3中加入到background屬性的兩個新的擴充屬性Background-Origin和Background-Clip，有需要的朋友可以看一看，希望帶給你幫助。

Background-Origin

在Background-Origin屬性出現之前，當我們向元素添加背景圖像時，圖像位置會從元素中填充的左上角開始。

列印預設背景原點位置的螢幕，如果background-position設定為左（left）0，上（top）0 ，您可以在填滿區域（紅點）看到背景圖片。（推薦教學：CSS3影片教學）

CSS3新屬性Background-Origin和Background-Clip的詳解

#程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
.box{ background:url("image/flowers.jpg") no-repeat;  
  width:500px;
  height:500px;  
  border:solid 50px rgba(0,0,0,0.5);  
  padding:50px;
  float:left;
  margin-right:15px;
  box-sizing:border-box;
}

.box span{color:#000; display:block; font-size:30px; font-weight:bold; height:100%; text-transform:uppercase; background-color:rgba(256,256,256,0.5)}
</style>
</head>
<body>
<div class="box">
  <span> </span>
</div>
</body>
</html>

Background-Origin讓你可以決定你想要的背景位置起始點， border（邊界）、padding（填入）和content（內容）。

新屬性background-origin根據box-model有3個值：

1、border-box - 定位背景位置0,0指向邊框的左上角。

2、padding-box（預設） - 將背景位置定位在填滿的左上角 0,0點。

3、content-box - 定位背景位置0,0指向內容的左上角。

CSS3新屬性Background-Origin和Background-Clip的詳解

程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
.box{
 background:url("image/flowers.jpg") no-repeat;  
  width:500px;
  height:500px;  
  border:solid 50px rgba(0,0,0,0.5);  
  padding:50px;
  float:left;
  margin-right:15px;
  box-sizing:border-box;
}
.box span{
 color:#000; 
 display:block; font-size:30px; 
 font-weight:bold; height:100%; 
 text-transform:uppercase; 
 background-color:rgba(256,256,256,0.5)
}
.box1{background-origin:border-box;}
.box2{background-origin:padding-box;}
.box3{background-origin:content-box;}
</style>
</head>
<body>
<div class="box box1">
  <span> </span>
</div>
<div class="box box2">
  <span> </span>
</div>
<div class="box box3">
  <span> </span>
</div>
</body>
</html>

在上面範例和圖片中，您可以看到Background-Origin值的影響。

background-clip

正如你在上一個例子中看到的那樣，background-origin很好但是仍然缺少某些東西。影像根據Background-Origin定位，但卻位於邊框/填充的右側/底部。

background-clip可以解決這個問題！使用background-clip，我們可以決定在哪裡剪切背景圖像，它與前面提到的背景原點值相同。

background-clip的新屬性也有3個值：

1、border-box（預設） - 顯示完整圖像，不會剪下任何內容。

2、padding-box - 剪下邊框背景影像。

3、content-box- 剪下邊框和填滿背景圖片。

CSS3新屬性Background-Origin和Background-Clip的詳解

程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
.box{
 background:url("image/flowers.jpg") no-repeat;  
  width:500px;
  height:500px;  
  border:solid 50px rgba(0,0,0,0.5);  
  padding:50px;
  float:left;
  margin-right:15px;
  box-sizing:border-box;
}
.box span{
color:#000; 
display:block; 
font-size:30px; 
font-weight:bold; 
height:100%; 
text-transform:uppercase; 
background-color:rgba(256,256,256,0.5)
}
.box1{
  background-origin:border-box;
  background-clip:border-box;
}
.box2{
  background-origin:padding-box;
  background-clip:padding-box;
}
.box3{
  background-origin:content-box;
  background-clip:content-box;
}

</style>
</head>
<body>
<div class="box box1">
  <span> </span>
</div>
<div class="box box2">
  <span> </span>
</div>
<div class="box box3">
  <span> </span>
</div>
</body>
</html>

正如您在上一個範例中所看到的，background-origin和background-clip在一起運作良好，大多數情況下您將使用相同的值，例如，假設您同時使用“content-box”值來定位背景圖片到內容並在填充和邊框處剪切背景圖像。

你也可以使用這個屬性製作更好的背景效果，看下面這個例子：我將背景圖像居中，在第一行中我完全保留了背景大小並同時使用background-origin和background- clip以及第二行這個例子我已經拉伸了背景圖像大小以適應具有background-size屬性的整個框，並同時使用background-origin和background-clip再次執行。

程式碼範例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
.box{ 
background:url("image/flowers.jpg") no-repeat center center;  
  width:300px;
  height:300px;  
  border:solid 50px rgba(0,0,0,0.5);  
  padding:50px;
  float:left;
  margin-right:15px; margin-bottom:15px;
  box-sizing:border-box;
}
.box span{
color:#000; 
display:block; 
font-size:30px; 
font-weight:bold; 
height:100%; 
text-transform:uppercase; 
background-color:rgba(256,256,256,0.5)}
.box1{
  background-clip:border-box;
  background-origin:border-box;
}
.box2{
  background-clip:padding-box;
  background-origin:padding-box;
}
.box3{
  background-clip:content-box;
  background-origin:content-box;
}
.cover{
background-size:cover; 
margin-top:10px;
}
</style>
</head>
<body>
<div class="box box1">
  <span></span>
</div>
<div class="box box2">
  <span></span>  
</div>
<div class="box box3">
  <span></span>  
</div>
<div class="box box1 cover" style="clear:both;">
  <span></span>
</div>
<div class="box box2 cover">
  <span></span>  
</div>
<div class="box box3 cover">
  <span></span>  
</div>
</body>
</html>

效果如下：

CSS3新屬性Background-Origin和Background-Clip的詳解