CSS3 背景

知識點:

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;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市评腺,隨后出現(xiàn)的幾起案子帘瞭,更是在濱河造成了極大的恐慌,老刑警劉巖蒿讥,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蝶念,死亡現(xiàn)場離奇詭異,居然都是意外死亡芋绸,警方通過查閱死者的電腦和手機媒殉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來摔敛,“玉大人廷蓉,你說我怎么就攤上這事÷黻迹” “怎么了苦酱?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵售貌,是天一觀的道長。 經(jīng)常有香客問我疫萤,道長颂跨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任扯饶,我火速辦了婚禮恒削,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘尾序。我一直安慰自己钓丰,他們只是感情好,可當我...
    茶點故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布每币。 她就那樣靜靜地躺著携丁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪兰怠。 梳的紋絲不亂的頭發(fā)上梦鉴,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天,我揣著相機與錄音揭保,去河邊找鬼肥橙。 笑死,一個胖子當著我的面吹牛秸侣,可吹牛的內(nèi)容都是我干的存筏。 我是一名探鬼主播,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼味榛,長吁一口氣:“原來是場噩夢啊……” “哼椭坚!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起搏色,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤善茎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后继榆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體巾表,經(jīng)...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡汁掠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年略吨,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片考阱。...
    茶點故事閱讀 38,643評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡翠忠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出乞榨,到底是詐尸還是另有隱情秽之,我是刑警寧澤当娱,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站考榨,受9級特大地震影響跨细,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜河质,卻給世界環(huán)境...
    茶點故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一冀惭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧掀鹅,春花似錦散休、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至扔嵌,卻和暖如春限府,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背对人。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工谣殊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人牺弄。 一個月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓姻几,卻偏偏與公主長得像,于是被迫代替她去往敵國和親势告。 傳聞我的和親對象是個殘疾皇子蛇捌,可洞房花燭夜當晚...
    茶點故事閱讀 43,509評論 2 348

推薦閱讀更多精彩內(nèi)容

  • CSS3背景 1.background-clip該屬性指定背景圖像的繪制區(qū)域語法:background-clip:...
    ToT_閱讀 945評論 0 0
  • 1、background-clip 定義: background-clip 屬性規(guī)定背景的繪制區(qū)域咱台。 語法:bac...
    紫夏離殤閱讀 455評論 0 1
  • CSS3 包含多個新的背景屬性络拌,它們提供了對背景更強大的控制。 在本章回溺,您將學(xué)到以下背景屬性: backgroun...
    蒲公英_前端開發(fā)者閱讀 376評論 0 1
  • 與背景相關(guān)的新增屬性 background-clip:指定背景的顯示范圍 background-origin:指定...
    oWSQo閱讀 525評論 0 0
  • CSS3 背景 CSS3中包含幾個新的背景屬性春贸,提供更大背景元素控制。在本章您將了解以下背景屬性: backgro...
    hx永恒之戀閱讀 243評論 0 2