css綁定背景大小？

Question

有人可以請向我解釋這個屬性是怎麼回事。它的CSS背景img縮放到視網膜像素顯示密度的一半大小。

background: url('../img/kellin-retina.png') no-repeat scroll 0px 0px /200px 70px; 

什麼了以前/200像素70像素的0像素0像素一部分。如果我把它拿出來，背景不會縮小。這兩個像素大小綁定到什麼地方？

由於

Answer 1

第一組0px 0px定義的背景圖像（左上），第二組200px 70px限定的尺寸，在此縮寫符號它代表background-size的位置。

如果在第二組中只有一個值，則它將是圖像的寬度。到剛纔設置的高度，你可以這樣做：

background: url('../img/kellin-retina.png') no-repeat scroll 0px 0px /auto 70px; 

背景屆時將達到70像素高和寬度將相應地。看到一個demo，其中背景圖像將永遠是視口的一半。

Answer 2

要確保你說明什麼的，可以考慮包括這樣所有的屬性：

background-image: url('../img/kellin-retina.png'); 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: 0px 0px; 
background-size: 200px 70px; 

這是你的代碼分解到這是什麼意思。我不完全是你的問題，但嘗試打開你的瀏覽器的開發工具來取消選中並檢查屬性，看看它對你的頁面有什麼影響，並修改數字，以更好地理解你在做什麼。如果您在製作某些特定工作時需要幫助，如果您製作代碼的Fiddle或向我展示實時網站，我可以提供幫助。