background-clip
- 指定背景的填充范圍坪它，可指定為padding,border,content,分別表示填充至內(nèi)邊距澈段，邊框,默認(rèn)為border欣范。
- 值得注意的是在Firefox中該屬性表現(xiàn)為-moz-background-clip,其他幾個(gè)主流瀏覽器中表現(xiàn)為-webkit-background-clip
div{
background:green;
width:200px;
height:300px;
padding:30px;
border:dashed 10px black;
margin-left:30px;
-webkit-background-clip:content;
-moz-background-clip:content;
}
background-origin
- 在繪制背景圖片時(shí)是默認(rèn)從內(nèi)部補(bǔ)白的左上角開始的，但我們可以利用這個(gè)屬性對(duì)其做出改變
- 分別為padding,border,content,表示從內(nèi)部補(bǔ)白亮元、邊框灯节、內(nèi)容區(qū)域左上角開始繪制
div{
-webkit-background-origin:padding;
-moz-background-clip:content;
}
background-size
- 該屬性用于指定背景圖片的的大小循头，有倆個(gè)參數(shù)分別為橫向大小和縱向大小绵估，當(dāng)想要保持原圖片大小比例時(shí)，可以只設(shè)置一個(gè)定值卡骂，另一個(gè)設(shè)置為auto
div{
background-size:30px auto;
}
同一元素內(nèi)設(shè)置多張背景圖片
- 在CSS3中可通過對(duì)關(guān)于背景圖片的屬性用逗號(hào)隔開国裳，來對(duì)同一元素設(shè)置多個(gè)背景圖片，如下：
div{
background-image:url(1.png),url(2.png),url(e.jpg);
background-repeat:no-repeat,repeat-x,repeat-y;
background-position:3% 98%,85%,center center;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
