css3.0 background-clip 背景的裁剪區域
阿新 • • 發佈：2019-02-12
background-clip：用來確定背景的裁剪區域。
background-clip是css3.0中新增加的屬性，一般喜歡將background-clip與background-origin和background-size一起應用。其中background-clip 和 background-origin 是 CSS3 中新加的 background module 屬性，用來確定背景的定位。background-clip 用來確定背景的裁剪區域。而 background-origin 用來決 定 background-position 計算的參考位置。
上圖效果：background-clip:content(其中在火狐瀏覽器不支援)
程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-clip</title>
<style>
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
</style>
</head>
<body>
<div class="back"></div>
</body>
</html>
(1). background-clip
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:padding;
-webkit-background-clip:padding;
background-clip:padding;}
(2). background-clip:border， 沒有位移，邊框20px、虛線、顏色#333，padding值為20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border;}
背景顏色填充到border中。
然後我們在看看新增背景圖片時效果是什麼樣的？
先上背景圖片（img.jpg）
(3). background-clip:content， 沒有位移，邊框20px、虛線、顏色#333，padding值為20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
這種效果僅僅在Safari和Chrome瀏覽器得到實現，超出content部分背景圖片以及背景顏色就會被減掉
(4). background-clip:padding， 沒有位移，邊框20px、虛線、顏色#333，padding值為20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:padding;
-webkit-background-clip:padding;
background-clip:padding;}
只要超出padding部分，背景圖片和顏色就會被減掉
(5). background-clip:border， 沒有位移，邊框20px、虛線、顏色#333，padding值為20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed ;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border;}
只要超出border部分，背景圖片和顏色就會被減掉
一般來說如果僅僅單獨對background-clip進行設定使用的話，起到的作用不大，為了一些效果我們經常會將background-clip 和 background-origin 合起來一起使用。
background-clip是css3.0中新增加的屬性，一般喜歡將background-clip與background-origin和background-size一起應用。其中background-clip 和 background-origin 是 CSS3 中新加的 background module 屬性，用來確定背景的定位。background-clip 用來確定背景的裁剪區域。而 background-origin 用來決 定 background-position 計算的參考位置。
- 首先background-clip在瀏覽器相容性:
- IE和遨遊不支援(不知IE9是否支援)。
- Firefox新增 私有屬性-moz-background-clip支援。
- Safari和Chrome新增私有屬性-webkit-background-clip支援。
- Opera: 不支援background-clip屬性，新增其私有屬性-o-background-clip也不支援。
- border：從border區域向外裁剪掉背景。（超出部分就被減掉）
- padding：從padding區域向外裁剪掉背景。 （超出部分就被減掉）
- content：從content區域向外裁剪掉背景。（超出部分就被減掉）
上圖效果：background-clip:content(其中在火狐瀏覽器不支援)
程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-clip</title>
<style>
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
</style>
</head>
<body>
<div class="back"></div>
</body>
</html>
(1). background-clip
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:padding;
-webkit-background-clip:padding;
background-clip:padding;}
(2). background-clip:border， 沒有位移，邊框20px、虛線、顏色#333，padding值為20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border;}
背景顏色填充到border中。
然後我們在看看新增背景圖片時效果是什麼樣的？
先上背景圖片（img.jpg）
(3). background-clip:content， 沒有位移，邊框20px、虛線、顏色#333，padding值為20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
這種效果僅僅在Safari和Chrome瀏覽器得到實現，超出content部分背景圖片以及背景顏色就會被減掉
(4). background-clip:padding， 沒有位移，邊框20px、虛線、顏色#333，padding值為20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:padding;
-webkit-background-clip:padding;
background-clip:padding;}
只要超出padding部分，背景圖片和顏色就會被減掉
(5). background-clip:border， 沒有位移，邊框20px、虛線、顏色#333，padding值為20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed ;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border;}
只要超出border部分，背景圖片和顏色就會被減掉
一般來說如果僅僅單獨對background-clip進行設定使用的話，起到的作用不大，為了一些效果我們經常會將background-clip 和 background-origin 合起來一起使用。