css怎么設置背景圖片的位置?用background-position屬性


css怎么設置背景圖片的位置?用background-position屬性,用英文小寫符號:連接background-position屬性的值即可,寫法如下:

background-position:值;

background-position屬性設置設置背景圖像的起始位置,這個屬性設置背景原圖像(由 background-image 定義)的位置,背景圖像如果要重復,將從這一點開始。

當你需要調整背景圖片的位置時,只需要修改這個【值】即可,background-position屬性的值具體如下:

描述
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
如果您僅規定了一個關鍵詞,那么第二個值將是”center”。

?

默認值:0% 0%。

x% y% 第一個值是水平位置,第二個值是垂直位置。

?

左上角是 0% 0%。右下角是 100% 100%。

如果您僅規定了一個值,另一個值將是 50%。

xpos ypos 第一個值是水平位置,第二個值是垂直位置。

?

左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

如果您僅規定了一個值,另一個值將是50%。

您可以混合使用 % 和 position 值。

這里有3組值,范如樂先說簡單的x和y值,x就是指水平位置,y就是指垂直位置,你通過設置%(百分比)或者px(像素)這兩種單位的值,就可以改變背景圖片的位置。

比如把背景圖片放到左上角,使用百分比值就是0% 0%,右下角是 100% 100%,以此類推,正中間就是50% 50%,你也可以設置成30% 20%,寫法也很簡單,舉例:

background-position: 50% 50%;

如果是用像素值,也是同樣的寫法,舉例:

background-position: 500px 500px;

也可以混合使用 % 和 position 值,舉例:

background-position: 50% 500px;

具體位置需要不同的值,范如樂就不一一講解了,網友們自己動手試一試就清楚了。

接下來講第一組全是英文的值,其實也不難,top就是頂部,left就是左邊,center就是居中,right就是右邊,bottom就是底部。

以上的詞兩兩組合后,就可以改變背景圖片的位置了,如果你只是寫了一個值,那么第二個值將是”center”,舉例:

background-position: top center;

這樣寫背景圖片就會頂部居中,也可以簡寫成:background-position: top;

其它的值,網友自己動手試試就清清楚楚了,范如樂就不啰嗦了。

但是,如果你想使用background-position屬性顯示下圖中紅框里面的ISO小圖:

需要用background-position屬性的負值,詳情點擊:《css中怎么顯示背景圖片的某一部分?用background-position屬性的負值》。

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

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

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




熱門文章: