background-clip与background-origin
規(guī)定背景的繪制區(qū)域
瀏覽器支持
IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 屬性。
注釋:Internet Explorer 8 以及更早的版本不支持 background-clip 屬性。IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 屬性。
有三個(gè)值:
border-box ??背景被裁剪到邊框盒。
padding-box ??背景被裁剪到內(nèi)邊距框。
content-box ?背景被裁剪到內(nèi)容框
demo:
.clip{width:400px;margin: 50px auto;background-color: red;padding: 20px;color: #ddd;line-height:25px;text-align: center;border: 10px dashed blue;}.clip-content{background-clip:content-box;}.clip-border{background-clip:border-box;}.clip-padding{background-clip:padding-box;}border-box
?
padding-box
?
content-box
?
?
其實(shí)background-clip的真正作用是決定背景在哪些區(qū)域顯示。如果它的值為border,則背景在元素的邊框、補(bǔ)白和內(nèi)容區(qū)域都會(huì)顯示;如果值為padding,則背景只會(huì)在補(bǔ)白和內(nèi)容區(qū)域顯示;如果值為content,則背景只會(huì)在內(nèi)容區(qū)域顯示。
那為毛前面的background-clip:border不起作用?這就得說(shuō)說(shuō)background-origin了
background-origin是指背景顯示的區(qū)域,或者說(shuō)背景是從哪個(gè)區(qū)域開(kāi)始繪制的(邊框、補(bǔ)白或內(nèi)容區(qū)域)。
還不理解的話那就這么來(lái)說(shuō)吧,background-position總該知道吧?它指定了背景的位置,比如background-position:0px 0px ;那這個(gè)0像素是指相對(duì)于哪里來(lái)說(shuō)的呢?這就涉及到一個(gè)參照點(diǎn)的問(wèn)題了。background-origin的作用就是指定background-position的參照點(diǎn)是在邊框區(qū)域的左上角,還是在補(bǔ)白區(qū)域的左上角,或是在內(nèi)容區(qū)域的左上角,對(duì)應(yīng)的三個(gè)值就分別是border、padding、content. background-position的也可以是left、right等方向詞語(yǔ),這時(shí)候就不能說(shuō)參照點(diǎn)了,而應(yīng)該說(shuō)參照面,如果值為background-origin的值為border,則參照面包括邊框區(qū)域、補(bǔ)白區(qū)域、內(nèi)容區(qū)域三個(gè)部分,如果值為padding,則參照面只包括補(bǔ)白區(qū)域和內(nèi)容區(qū)域,如果值為content,則不用我講了吧。
這個(gè)時(shí)候再來(lái)看看前面那個(gè)問(wèn)題就豁然開(kāi)朗了,你把background-clip設(shè)為border,這時(shí)候邊框里是能顯示背景的,但問(wèn)題是背景并不是從邊框的左上角開(kāi)始繪制的,它是從補(bǔ)白區(qū)域才開(kāi)始繪制的,女神背景壓根就沒(méi)想要搭理屌絲邊框,你屌絲擺出一個(gè)懷抱來(lái)迎接女神又有個(gè)屁用啊,趕緊細(xì)軟跑吧。background-origin的默認(rèn)值是padding,也就是默認(rèn)從補(bǔ)白區(qū)域開(kāi)始繪制背景。
demo:當(dāng)背景是圖片是background-origin:border-box。與background-clip:border-box。顯示時(shí)有區(qū)別,如果都是背景顏色,沒(méi)有區(qū)別,background-origin控制的是背景圖片顯示的區(qū)域,不會(huì)影響背景顏色
?
?
demo:
.clip{width:400px;margin: 50px auto;background-image: url("images/1.jpg");background-repeat: no-repeat;background-position: left top;background-color: red;overflow: hidden;padding: 20px;height:200px;color: #ddd;line-height:25px;text-align: center;border: 10px dashed blue;}.clip-content{background-clip:content-box;}.clip-border{background-clip:border-box;}.clip-padding{background-clip:padding-box;}.origin-content{-webkit-background-origin: content-box;background-origin: content-box;}.origin-border{-webkit-background-origin: border-box;background-origin: border-box;}.origin-padding{-webkit-background-origin: padding-box;background-origin: padding-box;}
發(fā)現(xiàn)一個(gè)小問(wèn)題:
當(dāng)設(shè)置背景backgroud-position:center center時(shí),background-origin不起作用,background-clip:border-box可以讓背景顏色繪制在邊框上(不太明白,希望懂得人可以指教)
修改上面的代碼:
.clip{background-position: center center;}效果圖
?
轉(zhuǎn)載于:https://www.cnblogs.com/xiaofenguo/p/6074863.html
總結(jié)
以上是生活随笔為你收集整理的background-clip与background-origin的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: Spring的Lifecycle
- 下一篇: 关于返回按钮的事情