css3 background顯示圖片的一部分
問題描述
前端新人,最近跟著網(wǎng)上一個入門項目學習。遇到如下問題:該元素是輪播圖左邊的按鈕圖片,
原圖是
為什么原圖大小為50px,設置為21px后并沒有壓縮原圖而是現(xiàn)實的左邊部分呢。。
問題解答
回答1:圖片是作為背景圖片顯示的。默認情況下元素的 background-size 屬性值為 auto,也就是保持背景圖片的原始寬度和高度。要想實現(xiàn) “完全壓縮原圖” ,需要重新設置 background-size 值為 “100%,100%”,這樣背景圖片的寬高就等于元素的寬高。
這是 background-size 不同取值的規(guī)則,具體見 w3c
你那.btn-left將這張圖設置為背景,而背景的寬或高如果是大于容器寬或高的話多出來的部分是不會顯示的。
如果是背景的寬或高大于容器寬或高的話多出來的部分默認會用你設置的圖重復填充空白,你這里設置了no-repeat就是不讓它重復填充。
覺得我說的還不懂的話可以看這里
回答3:樓主做的這不就是CSS Sprite(css精靈)嘛,設置了背景不重復,就只會顯示對應的左箭頭部分呀
回答4:你沒有給元素設置background-size屬性!
回答5:background-size:contain 會以最長的邊為基準,等比縮放,圖片不會被裁減。background-size:cover 會以最短的邊為基準,等比縮放,圖片會被裁減。background-size:100% 100% 會填充整個p。圖片不會被裁減,但是會被拉伸。
相關文章:
1. phpstudy8.1沒集成mysql-front2. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””3. docker鏡像push報錯4. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題5. node.js - mongodb查找子對象的名稱為某個值的對象的方法6. 前端 - @media query 使用出現(xiàn)的問題?7. javascript - QQ第三方登錄的問題8. html5 - datatables 加載不出來數(shù)據(jù)。9. javascript - 在 model里定義的 引用表模型時,model為undefined。10. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣?這個是怎么回事????

網(wǎng)公網(wǎng)安備