CSS3 background-clip

admin發表於2018-07-21
CSSS3

在CSS3 background-size一章節強調過如下兩個事實：

（1）.CSS3屬性和CSS2屬性相比要難一些。

（2）.學習需要正確的方式和技巧。

第一眼看到background-clip屬性也許會懵逼，但仔細分析屬性名組成，可以對它的作用有一個感性的猜想。

clip翻譯成中文具有“修剪”的意思，此屬性的作用恰如其名，就是用來“修剪”背景圖片在哪些區域顯示。

語法結構：

[CSS] 純文字檢視 複製程式碼
background-clip:border-box|padding-box|content-box|text|no-clip

一.border-box屬性值:

此屬性值（預設值）規定，背景圖片可以在邊框範圍內顯示。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
  background-repeat:no-repeat;
}
.border-box{
  background-clip:border-box;
  background-image:url(mytest/demo/small.jpg);
}
</style>
</head>
<body>
<ul class="test">
  <li class="border-box"></li>
</ul>
</body>
</html>

背景圖片可以在邊框中顯示，但左部和上部的邊框中沒有顯示背景圖片，因為受background-origin屬性的限制，因為此屬性規定背景圖片從哪個區域開始繪製，預設，從padding區域開始繪製（含有padding）。

關於background-origin屬性參閱CSS3 background-origin一章節。

二.padding-box屬性值：

規定背景圖片可以在padding範圍內顯示，這個時候背景圖片就不能夠在border範圍內顯示。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>background-clip屬性-螞蟻部落</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
}
.padding-box{
  background-clip:padding-box;
  background-image:url(mytest/demo/small.jpg);
  background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
  <li class="padding-box"></li>
</ul>
</body>
</html>

由以上程式碼的表現可以看出，背景圖片可以在padding範圍內繪製，邊框範圍內就不可以繪製了。

三.content-box：

此屬性規定背景圖片可以在content區域，也就是除去padding和border的區域內顯示。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>background-clip屬性-螞蟻部落</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
}
.content-box{
  background-clip:content-box;
  background-image:url(mytest/demo/small.jpg);
  background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
  <li class="content-box"></li>
</ul>
</body>
</html>

由以上程式碼的表現可以看出，背景圖片這個時候只能夠在content範圍內顯示了。

四.text：

從前景內容的形狀（比如文字）作為裁剪區域向外裁剪，也就是說只有前景內容的形狀內顯示背景圖片，例如只有文字內顯示背景。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>background-clip屬性-螞蟻部落</title> 
<style type="text/css"> 
ul li{ 
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  list-style:none; 
  background-repeat:no-repeat; 
  font-size:60px;
  font-weight:900
} 
.border-box{ 
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;  
  /*color:transparent;*/
  background-image:url(mytest/demo/small.jpg); 
} 
</style> 
</head> 
<body> 
<ul class="test"> 
  <li class="border-box">螞蟻部落</li> 
</ul> 
</body> 
</html>

由以上程式碼的表現可以看出，背景圖片只在文字內顯示，不過需要注意的是文字的text-fill-color或者color屬性值要設定為transparent，否則的話背景圖片會被遮擋。

相關文章