CSS屬性——background-origin與background-clip

鑫的第七章 2021-09-18 14:00:17 阅读数:237

css background-origin background origin background-clip

這兩個屬性都是 background 簡寫屬性的其中之一,都有 border-box|padding-box|content-box 三個值可以設置。

background-origin 是控制背景圖的比特置,就是單純設置背景圖的邊界,不會對背景顏色造成影響,默認值是 padding-box。

11.png

可以從效果圖看到,不同值的設置只會影響到背景圖在元素內的比特置,三個圖分別是從 border box,padding box,content box 盒子的比特置開始展示背景圖。

background-clip 是將背景圖進行切割,得到的是一個不完整的圖像,會對背景顏色造成影響(也會被切割),默認值是 border-box。

22.png

從效果圖可以看出,不同的值會影響背景圖展示的區域,border-box 會展示到邊框 border,padding-box 會展示到內邊距 padding,content-box 會展示到內容區域 content,而且連背景色也會被一同切割掉。

現在分別了解了這兩個屬性,我們就可以把兩個屬性一起使用去感受一下,給兩個屬性都設置為 content-box,可以看到會先把背景圖放到 content box 盒子的區域,然後又對 content box 內容進行切割,就得到了下面展示的效果。

44.png

版权声明:本文为[鑫的第七章]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210918140017389j.html