精品无码人妻一区二区免费蜜桃,欧洲精品一区二区三区中文字幕 ,亚洲国产精品二区在线

文章插圖
背景圖片在網(wǎng)頁(yè)的用處很廣，但他就是有個(gè)毛病，它的尺寸不太好控制，一旦背景的圖片超過(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;
核心代碼：background-size: auto
超出部分，被截掉
（2）數(shù)值
可以使用px或者% ，設(shè)置一個(gè)就對(duì)寬度起作用，設(shè)置第二個(gè) ，則是對(duì)高起作用；
如果單是設(shè)置一個(gè)寬，第二個(gè)高就會(huì)自動(dòng)設(shè)置，和寬保持等比例。
核心代碼：background-size: 600px;
核心代碼：background-size: 600px;
完整顯示，但空出了下面
當(dāng)然更便捷的是，兩個(gè)都設(shè)置100% ，就會(huì)直接填滿容器，但是這樣會(huì)失真。
核心代碼：background-size: 100% 100%;
核心代碼：background-size: 100% 100%;
雖然也能覆蓋容器，但已經(jīng)變相失真
（3）Contain
官方的解釋是圖片按照背景最短邊進(jìn)行按比例放大或縮小，其實(shí)你只要記住，圖片會(huì)完整的展示在容器內(nèi) ，并不會(huì)失真。
但這可能會(huì)帶來(lái)容器內(nèi)有空余的地方，這是因?yàn)閳D片要在不失真的情況下，按等比例完整的在不合尺寸的容器內(nèi)展示。
核心代碼：background-size: contain;
核心代碼：background-size: contain;
這幅圖片原本是豎著長(zhǎng)方形，而容器是橫著長(zhǎng)方形，并且圖片實(shí)際尺寸是要比容器大得多，但使用了contain ，也能在不失真的情況下，完整的展示在不合尺寸的容器里。
能在容器內(nèi)完整顯示，不變形
（4）Cover（常用）
官方的解釋是圖片按照背景最長(zhǎng)邊進(jìn)行按比例放大或縮小，其實(shí)你只要記住，圖片會(huì)按容器尺寸等比例覆蓋容器，避免會(huì)出現(xiàn)空白的地方，但會(huì)截掉一點(diǎn)點(diǎn)超出的部分。
核心代碼：background-size: cover;
核心代碼：background-size: cover;
實(shí)際上圖片尺寸是比容器大得多，但使用cover就可以讓圖片尺寸同步容器，超出的部分在裁掉。
完整覆蓋容器
這個(gè)是沒(méi)使用cover屬性，就只能看到一部分內(nèi)容。所以在使用背景圖片時(shí) ，一般都要加上cover屬性，好讓不同圖片能夠適用容器，僅僅只是截掉一點(diǎn)點(diǎn)圖片而已。
背景圖片原尺寸
知識(shí)導(dǎo)圖

以上關(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ì)您有所幫助：

css設(shè)置背景圖片 css背景圖片大小怎么調(diào)整