css3,background-clip/background-origin的使用场景，通俗讲解_h

先不说background-clip/background-origin的用法，我们先来聊聊css背景方面的知识。

 1   2   3   4       5      css背景知识点  6       7         body,p{ 8             margin:0; 9             padding:0;10         }11         p{12             width:100px;13             height:100px;14             background-color:pink;15         }16      17  18  19     
20  21   

现在p的宽和高各是100px，颜色的范围也是100*100的对吧，如果给它加上padding-top：10px呢？那么现在的高是110，颜色的背景是100*110对不？

因为背景是包括padding的，这对理解为什么需要使用background-clip和background-origin至关重要。

透露一下，大部分情况会使用在有用精灵图的背景上。

 1   2   3   4       5      css背景知识点  6       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      26  27  28     
29         
30

      
查看更多关于css3,background-clip/background-origin的使用场景，通俗讲解_h的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111021