css3中background新增的4個新的相關屬性用法介紹

2024-07-11 08:51:05

字體：大中小

來源：轉載

供稿：網友

關于background屬性用法，相信許多重構人員都很熟悉了，在css3中，background屬性依然保持以前的用法，不過可以允許在該屬性中添加多個背景圖像組，背景圖像之間通過逗號進行分隔。增加了4個新的相關屬性。

background-clip 指定背景的顯示范圍

background-origin 指定繪制背景圖像的起點

background-size 指定背景圖片的尺寸的大小

background-break 指定內聯元素的背景圖像進行平鋪時的循環方式

background-clip

目前webkit引擎的safari和chrome瀏覽器支持，mozilla Gecko引擎和Presto引擎（opera11.0以上）和trident引擎(ie9以上)都支持這個屬性，但是版本低的可能需要帶上各自的私有屬性,

background-clip:padding-box || border-box || content-box

background-clip 屬性用來判斷背景是否包含邊框區域，一般默認的background-color是從元素的邊框的左上角起到右下角為止，而backround-image卻不一樣，從padding邊緣的左上角到border右下角邊緣為止；用background-clip控制背景色和背景圖片的顯示區域，解決以上默認的問題，

border-box：從邊框區域向外裁剪背景；

padding-box:從補白區域向外裁剪背景；

content-box:從內容區域向外裁剪背景

no-clip:從邊框區域向外裁剪背景

上一篇：通過CSS讓TD自動換行

下一篇：純CSS3實現帶動畫效果導航菜單無需js