亚洲精品久久久久久第一页-人妻少妇精彩视品一区二区三区-91国产自拍免费视频-免费一级a在线播放视频正片-少妇天天日天天射天天爽-国产大屁股喷水视频在线观看-操美女骚穴抽插性爱视频-亚洲 欧美 中文字幕 丝袜-成人免费无码片在线观看

  1. 首頁(yè) > 生活知識(shí) > >

css表格添加背景圖 css設(shè)置背景圖片大小

生活百科

背景圖片在網(wǎng)頁(yè)的用處很廣 ， 但他就是有個(gè)毛??，它的硣\綺惶每刂?nbsp;， 一旦背景的圖片超過(guò)了容器的限制 ， 就會(huì)直接被截取，讓圖片看起來(lái)怪怪的 。
實(shí)際開(kāi)發(fā)中，設(shè)計(jì)師給你的圖片難免會(huì)有一點(diǎn)誤差，但你的圖片又不能這樣展示，更不可能自己手動(dòng)修改圖片，所以就必須使用一種方法來(lái)讓圖片自動(dòng)適應(yīng)容器 。
本質(zhì)上要解決的是每個(gè)即使不同尺寸的圖片 ， 都能統(tǒng)一適配同個(gè)容器的尺寸 。
語(yǔ)法控制背景圖片尺寸
background-size：類型；
（1）Auto
這是默認(rèn)值，等于沒(méi)有使用這個(gè)屬性 。超出的部分直接被截掉 。
核心代碼：background-size: auto;

css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
核心代碼：background-size: auto
css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
超出部分，被截掉
（2）數(shù)值
可以使用px或者%，設(shè)置一個(gè)就對(duì)寬度起作用，設(shè)置第二個(gè)，則是對(duì)高起作用；
如果單是設(shè)置一個(gè)寬 ， 第二個(gè)高就會(huì)自動(dòng)設(shè)置，和寬保持等比例 。
核心代碼：background-size: 600px;
css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
核心代碼：background-size: 600px;
css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
完整顯示，但空出了下面
當(dāng)然更便捷的是，兩個(gè)都設(shè)置100%，就會(huì)直接填滿容器 ， 但是這樣會(huì)失真 。
核心代碼：background-size: 100% 100%;
css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
核心代碼：background-size: 100% 100%;
css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
雖然也能覆蓋容器，但已經(jīng)變相失真
（3）Contain
官方的解釋是圖片按照背景最短邊進(jìn)行按比例放大或縮小，其實(shí)你只要記住 ， 圖片會(huì)完整的展示在容器內(nèi) ， 并不會(huì)失真 。
但這可能會(huì)帶來(lái)容器內(nèi)有空余的地方，這是因?yàn)閳D片要在不失真的情況下 ， 按等比例完整的在不合尺寸的容器內(nèi)展示 。
核心代碼：background-size: contain;
css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
核心代碼：background-size: contain;
這幅圖片原本是豎著長(zhǎng)方形，而容器是橫著長(zhǎng)方形 ， 并且圖片實(shí)際尺寸是要比容器大得多，但使用了contain，也能在不失真的情況下，完整的展示在不合尺寸的容器里 。
css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
【css表格添加背景圖 css設(shè)置背景圖片大小】能在容器內(nèi)完整顯示，不變形
（4）Cover（常用）
官方的解釋是圖片按照背景最長(zhǎng)邊進(jìn)行按比例放大或縮?。?其實(shí)你只要記住 ， 圖片會(huì)按容器尺寸等比例覆蓋容器 ， 避免會(huì)出現(xiàn)空白的地方，但會(huì)截掉一點(diǎn)點(diǎn)超出的部分 。
核心代碼：background-size: cover;
css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
核心代碼：background-size: cover;
實(shí)際上圖片尺寸是比容器大得多，但使用cover就可以讓圖片尺寸同步容器，超出的部分在裁掉 。
css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
完整覆蓋容器
這個(gè)是沒(méi)使用cover屬性，就只能看到一部分內(nèi)容 。所以在使用背景圖片時(shí)，一般都要加上cover屬性，好讓不同圖片能夠適用容器，僅僅只是截掉一點(diǎn)點(diǎn)圖片而已 。
css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
背景圖片原尺寸
知識(shí)導(dǎo)圖
css表格添加背景圖 css設(shè)置背景圖片大小

文章插圖
總結(jié)總結(jié)


    以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問(wèn)題，請(qǐng)您及時(shí)就醫(yī)或請(qǐng)專業(yè)人士給予相關(guān)指導(dǎo)!

    「愛(ài)刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對(duì)您有所幫助：