CSS background-clip

admin發表於2019-11-21
CSS

background-clip屬性用於規定元素背景能夠繪製區域，對背景色、背景圖片和漸變都有效。

掌握此屬性的用法可以從其名稱入手，background-clip由兩個單詞構成：

（1）.background：翻譯成漢語具有"背景"的意思。

（2）.clip：翻譯成漢語具有"修剪"的意思。

顧名思義，此屬性用於"修剪"元素背景，也就是規定元素背景的繪製區域。

語法結構：

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

下面通過程式碼例項詳細分析一個上述各個屬性值的作用。

為了便於演示，下面的程式碼都是以背景顏色作為演示，與背景圖片或者漸變原理相同。

一.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">
.ant{
  border:10px dashed green;
  width:150px;
  height:50px;
  padding:10px;
  margin-top:10px;
}
.border-box{
  background-clip:border-box;
  background-color:#ccc
}
</style>
</head>
<body>
  <div class="ant border-box"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/005423y3uoeu8ch0u9y1u7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

二.padding-box：

此屬性值規定背景可以在內邊距範圍內繪製，不能在邊框內繪製。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.ant{
  border:10px dashed green;
  width:150px;
  height:50px;
  padding:10px;
  margin-top:10px;
}
.border-box{
  background-clip:padding-box;
  background-color:#ccc
}
</style>
</head>
<body>
  <div class="ant border-box"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/005503fk0symmj99gogkdb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此時，背景可以在內邊距內繪製，但是不能在邊框內繪製。

三.content-box：

此屬性值規定背景可在內容區域繪製，不包括邊框和內邊距區域。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.ant{
  border:10px dashed green;
  width:150px;
  height:50px;
  padding:10px;
  margin-top:10px;
}
.border-box{
  background-clip:content-box;
  background-color:#ccc
}
</style>
</head>
<body>
  <div class="ant border-box"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/005646lah9tgnzzhnttatn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

四.text：

此屬性值規定背景只能在文字前景內容中繪製。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.ant{
  border:10px dashed green;
  width:150px;
  height:50px;
  padding:10px;
  margin-top:10px;
  font-size:30px;
  font-weight:900
}
.border-box{
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-color:red;
}
</style>
</head>
<body>
  <div class="ant border-box">螞蟻部落</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/005736wei9pknpekfvaqsq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

文字的text-fill-color或者color屬性值要設為transparent，否則背景會被遮擋。

相關文章