資訊專欄INFORMATION COLUMN
摘要：這里的關鍵說明在于標紅的兩個區域，分別是它會保持圖片的寬高比和當圖像和容器具有不同的尺寸時，空區域左右上右填充背景色。原圖為，所以為了放入，寬，那么高就得寬高比，所以會有下面的空白。
background-size與背景圖片填滿div
在開發中，常有需要將一張圖片作為一個div的背景圖片充滿div的需求
background-size的取值及解釋background-size共有三種屬性，分別為
background-size: coverMDN文檔解釋說明：縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見。A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn"t get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
這里的關鍵說明在于標紅的兩個區域，分別是它會保持圖片的寬高比和當圖像和容器具有不同的尺寸時，圖像被左/右或頂部/底部裁剪。之后會結合例子說明
background-size: containMDN文檔解釋說明：縮放背景圖片以完全裝入背景區，可能背景區部分空白。A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn"t get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.
這里的關鍵說明在于標紅的兩個區域，分別是它會保持圖片的寬高比和當圖像和容器具有不同的尺寸時，空區域（左/右/上/右）填充背景色。之后會結合例子說明
background-size: width-value,height-value;分為固定大小和百分比和auto，固定大小就是寫死；auto就是以背景圖片的比例縮放背景圖片。。
百分比的的MDN文檔解釋說明實驗及聲明值，指定背景圖片相對背景區（background positioning area）的百分比。背景區由background-origin設置，默認為盒模型的內容區與內邊距，也可設置為只有內容區，或者還包括邊框。如果attachment 為fixed，背景區為瀏覽器可視區（即視口），不包括滾動條。不能為負值。
這次選用魯殿作為背景圖，這張圖的尺寸是260*234，寬高比為260/234 ≈ 1.11
假設一div的寬高為200*200，下面測試中左為表現圖，右為原圖
background-size: contain
background-size: cover
background-size: auto (auto)
background-size: 100% 100%
分析及解釋：首先contain是不行的，原理在于contain要保持寬高比將圖片完全放入div中，div為200×200。原圖為260×234，所以為了放入div，寬260→200，那么高就得200/寬高比(1.11) = 180，所以會有下面的空白。
再其次，cover在這個時候也是不符合要求的，雖然看起來貌似符合要求，但是與原圖是有差別的嗎，原因在于cover與contain完全放入相反，它要求完全覆蓋。所以要覆蓋就要從更小的高計算。高234→200，寬就等于200×1.11 = 222，圖像就會被右部裁剪掉一部分。
再再其次，auto是原圖大小也是不符合的。
所以，background-size: 100%, 100%;是符合需求的。按照div的大小進行計算
其他各種大小div與各種大小的圖片搭配請參照上述說明自行分析。
個人建議這種需求都使用background-size: 100%, 100%;
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112887.html
摘要：靈活的背景定位靈活的背景定位實現效果將背景圖定位到距離容器底邊且距離右邊的位置。棋盤實現效果實現代碼關鍵樣式其它樣式偽隨機背景偽隨機背景實現效果重復平鋪的幾何圖案很美觀，但看起來可能有一些呆板。靈活的背景定位 實現效果： 將背景圖定位到距離容器底邊 10px 且距離右邊 20px 的位置。 background-position 方案 實現代碼： 海盜密碼 div { /* 關鍵樣...
摘要：屬性值則依賴于我們需要創建什么樣的漸變背景，例如線性漸變或放射性漸變。我們會在線性漸變中介紹不同種類的供應商前綴，但為了簡便起見，放射性漸變中我們不會再提及。線性漸變多年來，設計師和開發者們都是通過切圖來實現漸變背景。 背景對網站的設計有重大的影響。它有利于建立網站的整體感覺，設置分組，分配優先級，對網站的可用性也有相當大的影響。 在CSS中，元素的背景可以是一個純色，一張圖，一個漸變...
摘要：屬性值則依賴于我們需要創建什么樣的漸變背景，例如線性漸變或放射性漸變。我們會在線性漸變中介紹不同種類的供應商前綴，但為了簡便起見，放射性漸變中我們不會再提及。線性漸變多年來，設計師和開發者們都是通過切圖來實現漸變背景。 背景對網站的設計有重大的影響。它有利于建立網站的整體感覺，設置分組，分配優先級，對網站的可用性也有相當大的影響。 在CSS中，元素的背景可以是一個純色，一張圖，一個漸變...
摘要：屬性值則依賴于我們需要創建什么樣的漸變背景，例如線性漸變或放射性漸變。我們會在線性漸變中介紹不同種類的供應商前綴，但為了簡便起見，放射性漸變中我們不會再提及。線性漸變多年來，設計師和開發者們都是通過切圖來實現漸變背景。 背景對網站的設計有重大的影響。它有利于建立網站的整體感覺，設置分組，分配優先級，對網站的可用性也有相當大的影響。 在CSS中，元素的背景可以是一個純色，一張圖，一個漸變...
摘要：做成背景圖片單個你要的正方形你要的正方形居中填滿多個循環時做成背景圖片 單個 .imgdiv { width: 100px; // 你要的正方形 height: 100px; // 你要的正方形 background-image: url(/your/image/path.jpg); background-position: center cen...
閱讀 3825·2021-10-12 10:11
閱讀 3644·2021-09-13 10:27
閱讀 2552·2019-08-30 15:53
閱讀 1978·2019-08-29 18:33
閱讀 2198·2019-08-29 14:03
閱讀 1002·2019-08-29 13:27
閱讀 3323·2019-08-28 18:07
閱讀 784·2019-08-26 13:23
