問題描述

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

問題解答

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

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

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

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

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

你沒有給元素設(shè)置background-size屬性！

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