【CSS背景圖片頁面自適應(yīng)充滿屏幕】

CSS背景圖片頁面自適應(yīng)充滿屏幕


實(shí)現(xiàn)代碼:

body {

? ? ? ? overflow: hidden;

? ? ? ? position: fixed;

? ? ? ? width:100%;

? ? ? ? height:100%;

? ? ? ? background: url("image.png") no-repeat;

? ? ? ? background-size:cover;

}


擴(kuò)展:

background-size的屬性:

background-size: auto || <length> || <percentage> || cover || contain

取值說明:

1累澡、auto:此值為默認(rèn)值乐严,保持背景圖片的原始高度和寬度瑟慈;

2且改、<length>此值設(shè)置具體的值涨享,可以改變背景圖片的大惺餐厅瞎;

3、<percentage>此值為百分值硝烂,可以是0%?100%之間任何值箕别,但此值只能應(yīng)用在塊元素上,所設(shè)置百分值將使用背景圖片大小根據(jù)所在元素的寬度的百分比來計(jì)算。

4究孕、cover:此值是將圖片放大啥酱,以適合鋪滿整個(gè)容器,這個(gè)主要運(yùn)用在厨诸,當(dāng)圖片小于容器時(shí),又無法使用background-repeat來實(shí)現(xiàn)時(shí)禾酱,我們就可以采用cover;將背景圖片放大到適合容器的大小微酬,但這種方法會(huì)使用背景圖片失真;

5颤陶、contain:此值剛好與cover相反颗管,其主要是將背景圖片縮小,以適合鋪滿整個(gè)容器滓走,這個(gè)主要運(yùn)用在垦江,當(dāng)背景圖片大于元素容器時(shí),而又需要將背景圖片全部顯示出來搅方,此時(shí)我們就可以使用contain將圖片縮小到適合容器大小為止比吭,這種方法同樣會(huì)使用圖片失真。

附:當(dāng)background-size取值為<length>和<percentage>時(shí)可以設(shè)置兩個(gè)值姨涡,也可以設(shè)置一個(gè)值衩藤,當(dāng)只取一個(gè)值時(shí),第二個(gè)值相當(dāng)于auto涛漂,但這里的auto并不會(huì)使背景圖片的高度保持自己原始高度赏表,而會(huì)與第一個(gè)值相同。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末匈仗,一起剝皮案震驚了整個(gè)濱河市瓢剿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌悠轩,老刑警劉巖间狂,帶你破解...
    沈念sama閱讀 221,820評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異哗蜈,居然都是意外死亡前标,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門距潘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來炼列,“玉大人,你說我怎么就攤上這事音比〖蠹猓” “怎么了?”我有些...
    開封第一講書人閱讀 168,324評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長稽犁。 經(jīng)常有香客問我焰望,道長,這世上最難降的妖魔是什么已亥? 我笑而不...
    開封第一講書人閱讀 59,714評(píng)論 1 297
  • 正文 為了忘掉前任熊赖,我火速辦了婚禮,結(jié)果婚禮上虑椎,老公的妹妹穿的比我還像新娘震鹉。我一直安慰自己,他們只是感情好捆姜,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,724評(píng)論 6 397
  • 文/花漫 我一把揭開白布传趾。 她就那樣靜靜地躺著,像睡著了一般泥技。 火紅的嫁衣襯著肌膚如雪浆兰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,328評(píng)論 1 310
  • 那天珊豹,我揣著相機(jī)與錄音簸呈,去河邊找鬼。 笑死平夜,一個(gè)胖子當(dāng)著我的面吹牛蝶棋,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播忽妒,決...
    沈念sama閱讀 40,897評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼玩裙,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了段直?” 一聲冷哼從身側(cè)響起吃溅,我...
    開封第一講書人閱讀 39,804評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎鸯檬,沒想到半個(gè)月后决侈,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,345評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡喧务,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,431評(píng)論 3 340
  • 正文 我和宋清朗相戀三年赖歌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片功茴。...
    茶點(diǎn)故事閱讀 40,561評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡庐冯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出坎穿,到底是詐尸還是另有隱情展父,我是刑警寧澤返劲,帶...
    沈念sama閱讀 36,238評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站栖茉,受9級(jí)特大地震影響篮绿,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜吕漂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,928評(píng)論 3 334
  • 文/蒙蒙 一亲配、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧痰娱,春花似錦弃榨、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽娜饵。三九已至坡贺,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間箱舞,已是汗流浹背遍坟。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評(píng)論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留晴股,地道東北人愿伴。 一個(gè)月前我還...
    沈念sama閱讀 48,983評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像电湘,于是被迫代替她去往敵國和親隔节。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,573評(píng)論 2 359

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

  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color寂呛,font怎诫,text-align,li...
    wzhiq896閱讀 1,759評(píng)論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color贷痪,font幻妓,text-align,li...
    love2013閱讀 2,316評(píng)論 0 11
  • 1.CSS簡介 Cascading Style Sheet 層疊樣式表 主要用來定義頁面中的表現(xiàn)劫拢,HTML 描述頁...
    hyt222閱讀 836評(píng)論 0 0
  • 一肉津、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用? CSS Sprite把多個(gè)背景圖片合成為一張舱沧,通...
    dengpan閱讀 329評(píng)論 0 0
  • 假設(shè)我們有一個(gè)兩欄自適應(yīng)的布局妹沙,在主內(nèi)容中應(yīng)用了一個(gè)圖片,其結(jié)構(gòu)如下: 這是一個(gè)很常見的結(jié)構(gòu)狗唉,其效果就是一張圖片初烘,...
    抱著熊喵啃什么閱讀 3,811評(píng)論 0 4