css3,background-clip/background-origin的使用場景，通俗講解 - pssp－IT工程師數位筆記本

文章出處

先不說background-clip/background-origin的用法，我們先來聊聊css背景方面的知識。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css背景知識點</title>
 6     <style>
 7         body,p{
 8             margin:0;
 9             padding:0;
10         }
11         p{
12             width:100px;
13             height:100px;
14             background-color:pink;
15         }
16     </style>
17 </head>
18 <body>
19     <p></p>
20 </body>
21 </html>

現在p的寬和高各是100px，顏色的范圍也是100*100的對吧，如果給它加上padding-top：10px呢？那么現在的高是110，顏色的背景是100*110對不？

因為背景是包括padding的，這對理解為什么需要使用background-clip和background-origin至關重要。

透露一下，大部分情況會使用在有用精靈圖的背景上。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css背景知識點</title>
 6     <style>
 7         body,p{
 8             margin:0;
 9             padding:0;
10         }
11         .box{
12             width:100%;
13             height:45px;
14             line-height:45px;
15             background-color:#ccc;
16             
17         }
18         p{
19             width:42px;
20             height:40px;
21             margin:0 auto;
22             background-size:50px 50px;
23             background:url("focus-icon.png") no-repeat 0 -50px;
24         }
25     </style>
26 </head>
27 <body>
28     <div class="box">
29         <p></p>
30     </div>
31 </body>
32 </html>