問(wèn)題描述

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

問(wèn)題解答

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

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

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

覺(jué)得我說(shuō)的還不懂的話可以看這里

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

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

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