知識點:
CSS3 背景圖像區(qū)域
CSS3 背景圖像定位
CSS3 背景圖像大小
CSS3 多重背景圖像
CSS3 背景屬性整合
一非驮、CSS3 背景圖像區(qū)域
background-clip 屬性
background-clip屬性指定背景繪制區(qū)域
【語法】
background-clip: border-box|padding-box|content-box;
border-box:背景被裁剪到邊框盒
padding-box:背景被裁剪到內(nèi)邊距框
content-box:背景被裁剪到內(nèi)容框
【兼容性】
IE9+拌蜘、FireFox惭笑、Chrome落君、Safari、Opera
二缺狠、CSS3 背景圖像定位
background-origin屬性
background-origin屬性指定background-position屬性應(yīng)該是相對位置
【語法】
background-origin: padding-box|border-box|content-box;
background-origin 設(shè)置元素背景圖片的原始起始位置
定義背景圖片位置宇攻,兩個值:水平和垂直偏移量
background-origin:content-box;背景圖像相對于內(nèi)容框來定位。
background-origin:padding-box;背景圖像相對于內(nèi)邊距框來定位奕锌。
background-origin:border-box;背景圖像相對于邊框來定位
【兼容性】
IE9+著觉、FireFox4+、Chrome歇攻、Safari5+固惯、Opera
三、CSS3 背景圖像大小
background-size屬性
background-size屬性指定背景圖片大小
【語法】
background-size: length|percentage|cover|contain;
屬性值(percentage百分比):0%~100%之間的任何值
第二個值可有可無缴守,如沒有默認為auto
當只設(shè)置第一個值時葬毫,第二個值根據(jù)圖片寬度值來等比縮放
當兩個值都有,按設(shè)置值大小顯示圖片
cover:即將背景圖片等比例縮放以填滿整個容器
contain:即將背景圖片等比例縮放至某一邊緊貼容器邊緣為止
【兼容性】
IE9+屡穗、FireFox4+贴捡、Chrome、Safari5+村砂、Opera
四烂斋、CSS3 多重背景圖像
CSS3 允許您為元素使用多個背景圖像
【語法】
background-image: url(img1.jpg), url(img2.png);
元素引用多個背景圖片,前面圖片依此覆蓋后面圖础废。
五汛骂、CSS3 背景屬性整合
背景縮寫屬性可以在一個聲明中設(shè)置所有的背景屬性
【語法】
background: color position size repeat origin clip attachment image;