css中怎么顯示背景圖片的某一部分?用background-position屬性的負值


css中怎么顯示背景圖片的某一部分?用background-position屬性的負值定位到背景圖片的某一部分,然后設置該元素的寬度和高度與需要顯示的部分大小一致即可,舉例如下:

css中怎么顯示背景圖片的某一部分?用background-position屬性的負值

如果我想要顯示上圖中的某一個圖標,比如ISO圖標:

首先用作圖軟件,比如PS軟件、FW軟件等,先框選出ISO圖標,查看該圖標的位置信息:

由圖可見,X值是215px,Y值是105,用background-position屬性的負值,可以定位到背景圖片的這個位置,寫法如下:

background-position: -215px -105;

為了讓網友們更容易理解,范如樂寫了一個div標簽,設置div的寬度是上圖中的W,也就是寬度90px,高度是上圖中的H,也就是高度87px,效果如圖:

默認情況下,背景圖片會隨著頁面的滾動而移動,如果你想要頁面的其余部分滾動時,背景圖片不會移動,還要加上background-attachment屬性,詳情點擊:《css中固定背景圖片怎么設置?用background-attachment屬性》。

看到這里,一些好學的網友肯定就會問了:范如樂,background-position屬性用了負值來定位背景圖片,那我想移動這張背景圖片應該怎么設置呢?

這個時候,需要用到CSS中的position屬性來移動該元素,詳情點擊:《css的position屬性值有哪些?有何區別?》。

轉載時需注明來源!首發:如樂建站之家;原文鏈接:
http://www.lmaocr.com/css/8101.html
如樂建站之家創始人——范如樂:

如樂建站之家創始人范如樂  聯系Q Q:349142701
  聯系微信:349142701
  聯系電話:13189611692

【如樂建站之家】由范如樂于2013年創建至今,立志于解決新手不會快速自己建網站的痛苦,讓你也能零基礎快速學會自己建網站!詳細教程點擊下圖:




熱門文章: