CSS背景顯示范圍的問題如何解決

今天小編給大家分享一下CSS背景顯示范圍的問題如何解決的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　HTML：

　　<div><div></div></div>

　　<div class="box default"><div></div></div>

　　<div class="box border-box"><div></div></div>

　　CSS：

　　div{

　　width:120px;

　　height:120px;

　　margin:20px 0 0 10px;

　　padding:20px;

　　display:inline-block;

　　background:url(地址);

　　}

　　div>div{

　　background:rgba(0,200,255,.4);

　　margin:0;

　　padding:0;

　　}

　　.box{

　　border:10px dotted rgba(255,0,0,.5);

　　}

　　.default{

　　/*box-sizing:content-box;*/ /*預設值*/

　　}

　　.border-box{

　　box-sizing:border-box;

　　}

　　background-clip

　　嚴格說起來background-clip與box-sizing應該是八竿子打不著邊，但因為在設計一個box的時候，往往都會border、padding和margin混合使用，也因為這個CSS3的屬性，讓我剎那間不知道是哪里寫錯了，結果原來是自己忘了屬性該怎么使用。

　　background-clip共有三個設定值，分別是：border-box（預設值）、padding-box、content-box，很有趣的是，剛剛的box-sizing預設值為content-box，這里的預設值卻變成了border-box，下面的三張圖，分別代表了這三個設定值的長相，我們可以看到，第一張圖在預設值的情形下，邊框之下就是原本box的底色（邊框是半透明的虛線），第二張圖設為padding-box，border下方就不會有box底色，最后一個設定為content-box，就只會出現(xiàn)content區(qū)域的背景，border與padding下的背景都會消失，這也是background（背景）clip（剪裁）的意義所在。

　　HTML：

　　<div class="box bg-border-box"><div></div></div>

　　<div class="box bg-padding-box"><div></div></div>

　　<div class="box bg-content-box"><div></div></div>

　　CSS：

　　div{

　　width:120px;

　　height:120px;

　　margin:20px 0 0 10px;

　　display:inline-block;

　　background:url(地址);

　　padding:20px;

　　}

　　div>div{

　　margin:0;

　　padding:0;

　　background:rgba(0,200,255,.4);

　　}

　　.bg-border-box{

　　/* background-clip:border-box; */ /*預設值*/

　　}

　　.bg-padding-box{

　　background-clip:padding-box;

　　}

　　.bg-content-box{

　　background-clip:content-box;

　　}

以上就是“CSS背景顯示范圍的問題如何解決”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。