css3 background顯示圖片的一部分

問題描述

前端新人，最近跟著網上一個入門項目學習。遇到如下問題：該元素是輪播圖左邊的按鈕圖片，原圖是為什么原圖大小為50px，設置為21px后并沒有壓縮原圖而是現實的左邊部分呢。。

問題解答

圖片是作為背景圖片顯示的。默認情況下元素的 background-size 屬性值為 auto，也就是保持背景圖片的原始寬度和高度。要想實現 “完全壓縮原圖” ，需要重新設置 background-size 值為 “100%,100%”，這樣背景圖片的寬高就等于元素的寬高。這是 background-size 不同取值的規則，具體見 w3c

你那.btn-left將這張圖設置為背景，而背景的寬或高如果是大于容器寬或高的話多出來的部分是不會顯示的。

如果是背景的寬或高大于容器寬或高的話多出來的部分默認會用你設置的圖重復填充空白，你這里設置了no-repeat就是不讓它重復填充。

覺得我說的還不懂的話可以看這里

樓主做的這不就是CSS Sprite(css精靈)嘛，設置了背景不重復，就只會顯示對應的左箭頭部分呀

你沒有給元素設置background-size屬性！

background-size:contain 會以最長的邊為基準，等比縮放，圖片不會被裁減。background-size:cover 會以最短的邊為基準，等比縮放，圖片會被裁減。background-size:100% 100% 會填充整個p。圖片不會被裁減，但是會被拉伸。