HTML-CSS-189:背景相關(guān)

背景尺寸屬性

background-size:length|percentage|cover|contain;

length?設(shè)置背景圖像的高度和寬度坎拐。第一個值設(shè)置寬度烦磁,第二個值設(shè)置高度养匈。如果只設(shè)置一個值哼勇,
? ? ? ? ? ?則第二個值會被設(shè)置為 "auto"都伪。

percentage?以父元素的百分比來設(shè)置背景圖像的寬度和高度土砂。第一個值設(shè)置寬度姑丑,第二個值設(shè)置高
? ? ? ? ? ? ? ? ? ?度。如果只設(shè)置一個值蚜点,則第二個值會被設(shè)置為 "auto"帝璧。

cover 把背景圖像擴(kuò)展至足夠大先誉,以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示?在背景定位區(qū)域中的烁。

contain 把圖像圖像擴(kuò)展至最大尺寸褐耳,以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域


背景圖片定位區(qū)域?qū)傩?/h1>

background-origin: padding-box|border-box|content-box;

padding-box?背景圖像相對于內(nèi)邊距框來定位。

border-box?背景圖像相對于邊框盒來定位渴庆。

content-box?背景圖像相對于內(nèi)容框來定位铃芦。


背景圖片繪制區(qū)域?qū)傩?/h1>

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

border-box 背景被裁剪到邊框盒。

padding-box 背景被裁剪到內(nèi)邊距框襟雷。

content-box 背景被裁剪到內(nèi)容框刃滓。


多重背景圖片

/*先添加的圖片顯示在上面,多個背景圖片用逗號隔開耸弄,代碼如下*/

background-image:url("img/one-piece/offer/run.png"),url(img/one-piece/offer/hzwbg.jpg);

background-size:30% auto,cover;

background-repeat:no-repeat,no-repeat;

background-position:100% 7000%,0 0;

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末咧虎,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子计呈,更是在濱河造成了極大的恐慌砰诵,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,820評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件捌显,死亡現(xiàn)場離奇詭異胧砰,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)苇瓣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評論 3 399
  • 文/潘曉璐 我一進(jìn)店門尉间,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人击罪,你說我怎么就攤上這事哲嘲。” “怎么了媳禁?”我有些...
    開封第一講書人閱讀 168,324評論 0 360
  • 文/不壞的土叔 我叫張陵眠副,是天一觀的道長。 經(jīng)常有香客問我竣稽,道長囱怕,這世上最難降的妖魔是什么霍弹? 我笑而不...
    開封第一講書人閱讀 59,714評論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮娃弓,結(jié)果婚禮上典格,老公的妹妹穿的比我還像新娘。我一直安慰自己台丛,他們只是感情好耍缴,可當(dāng)我...
    茶點故事閱讀 68,724評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挽霉,像睡著了一般防嗡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上侠坎,一...
    開封第一講書人閱讀 52,328評論 1 310
  • 那天蚁趁,我揣著相機(jī)與錄音,去河邊找鬼实胸。 笑死他嫡,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的童芹。 我是一名探鬼主播涮瞻,決...
    沈念sama閱讀 40,897評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼假褪!你這毒婦竟也來了署咽?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,804評論 0 276
  • 序言:老撾萬榮一對情侶失蹤生音,失蹤者是張志新(化名)和其女友劉穎宁否,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缀遍,經(jīng)...
    沈念sama閱讀 46,345評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡慕匠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,431評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了域醇。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片台谊。...
    茶點故事閱讀 40,561評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖譬挚,靈堂內(nèi)的尸體忽然破棺而出锅铅,到底是詐尸還是另有隱情,我是刑警寧澤减宣,帶...
    沈念sama閱讀 36,238評論 5 350
  • 正文 年R本政府宣布盐须,位于F島的核電站,受9級特大地震影響漆腌,放射性物質(zhì)發(fā)生泄漏贼邓。R本人自食惡果不足惜阶冈,卻給世界環(huán)境...
    茶點故事閱讀 41,928評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望塑径。 院中可真熱鬧女坑,春花似錦、人聲如沸晓勇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绑咱。三九已至,卻和暖如春枢泰,著一層夾襖步出監(jiān)牢的瞬間描融,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評論 1 272
  • 我被黑心中介騙來泰國打工衡蚂, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留窿克,地道東北人。 一個月前我還...
    沈念sama閱讀 48,983評論 3 376
  • 正文 我出身青樓毛甲,卻偏偏與公主長得像年叮,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子玻募,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,573評論 2 359

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

  • 一只损、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進(jìn)行樣式設(shè)定的標(biāo)簽(元素)”七咧。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,600評論 0 6
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color跃惫,font,text-align艾栋,li...
    love2013閱讀 2,316評論 0 11
  • (這是15年初學(xué)css時記的筆記) 選擇器 簡單選擇器 標(biāo)簽選擇器 直接把標(biāo)簽名加前面爆存。 類選擇器 用.+ cla...
    burningalive閱讀 956評論 0 0
  • 1. 定義和用法 background是一個簡寫屬性,可以在一個聲明中設(shè)置所有的背景屬性蝗砾,可設(shè)置的屬性如下: 這些...
    lightNate閱讀 4,371評論 2 9
  • 磕磕碰碰的走過二十多年先较,即將步入大四,再此之前還未真正考慮過未來悼粮,大三暑假細(xì)細(xì)想來闲勺,頓時一頓恐慌。大學(xué)專業(yè)為機(jī)械設(shè)...
    銀子粥閱讀 167評論 0 0