青青草免费线看线看|啊在车上停不下来了|国产少女免费观看电视剧|仑乱88MAV|精品老司机在线观看视频|国产一区二区三区高清免费视频|在线观看免费777av

  1. 首頁 > 生活百科 > >

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

生活百科容器


背景圖片在網(wǎng)頁的用處很廣，但他就是有個毛病，它的尺寸不太好控制，一旦背景的圖片超過了容器的限制，就會直接被截取，讓圖片看起來怪怪的 。
實際開發(fā)中，設計師給你的圖片難免會有一點誤差，但你的圖片又不能這樣展示，更不可能自己手動修改圖片，所以就必須使用一種方法來讓圖片自動適應容器 。
本質(zhì)上要解決的是每個即使不同尺寸的圖片，都能統(tǒng)一適配同個容器的尺寸 。
語法 控制背景圖片尺寸
background-size：類型；
（1）Auto
這是默認值，等于沒有使用這個屬性 。超出的部分直接被截掉 。
核心代碼：background-size: auto;
核心代碼：background-size: auto
超出部分，被截掉
（2）數(shù)值
可以使用px或者%，設置一個就對寬度起作用，設置第二個，則是對高起作用；
如果單是設置一個寬，第二個高就會自動設置，和寬保持等比例 。
核心代碼：background-size: 600px;
核心代碼：background-size: 600px;
【css設置背景圖片 css背景圖片大小怎么調(diào)整】完整顯示，但空出了下面
當然更便捷的是，兩個都設置100%，就會直接填滿容器，但是這樣會失真 。
核心代碼：background-size: 100% 100%;
核心代碼：background-size: 100% 100%;
雖然也能覆蓋容器，但已經(jīng)變相失真
（3）Contain
官方的解釋是圖片按照背景最短邊進行按比例放大或縮小，其實你只要記住，圖片會完整的展示在容器內(nèi)，并不會失真 。
但這可能會帶來容器內(nèi)有空余的地方，這是因為圖片要在不失真的情況下，按等比例完整的在不合尺寸的容器內(nèi)展示 。
核心代碼：background-size: contain;
核心代碼：background-size: contain;
這幅圖片原本是豎著長方形，而容器是橫著長方形，并且圖片實際尺寸是要比容器大得多，但使用了contain，也能在不失真的情況下，完整的展示在不合尺寸的容器里 。
能在容器內(nèi)完整顯示，不變形
（4）Cover（常用）
官方的解釋是圖片按照背景最長邊進行按比例放大或縮小，其實你只要記住，圖片會按容器尺寸等比例覆蓋容器，避免會出現(xiàn)空白的地方，但會截掉一點點超出的部分 。
核心代碼：background-size: cover;
核心代碼：background-size: cover;
實際上圖片尺寸是比容器大得多，但使用cover就可以讓圖片尺寸同步容器，超出的部分在裁掉 。
完整覆蓋容器
這個是沒使用cover屬性，就只能看到一部分內(nèi)容 。所以在使用背景圖片時，一般都要加上cover屬性，好讓不同圖片能夠適用容器，僅僅只是截掉一點點圖片而已 。
背景圖片原尺寸

猜你喜歡