1. 首頁 > 生活 > >

css怎么改背景圖大小 css3調整背景圖片大小的方式

小知識



文章插圖
css怎么改背景圖大小 css3調整背景圖片大小的方式

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