狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

[點(diǎn)晴永久免費(fèi)OA]CSS固定頁面Body背景圖像定位方法
admin
2023年7月19日 22:48 本文熱度 1023

導(dǎo)讀

固定背景圖片的通常方法就是把background-attachment設(shè)成fix，進(jìn)一步的話自然則是用background-position，下面愛站技術(shù)頻道的小編就給各位帶來CSS固定頁面背景圖像定位方法。


挺常聽見到有人問說，要如何才能讓背景圖片不管卷軸拉到那邊都不會(huì)變？這其實(shí)只要透過設(shè)定 background-attachment 就能達(dá)到該效果了。

Body其實(shí)并不用做任何設(shè)定，這邊我為了讓網(wǎng)頁有卷軸，所以在pre包起一段話：
 HTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <body>  

  2. <pre>  

  3. 歡   

  4.     

  5. 迎   

  6.     

  7. 來   

  8.     

  9. 到   

  10.     

  11. 腳   

  12.     

  13. 本   

  14.     

  15. 之   

  16.     

  17. 家   

  18.     

  19. ，   

  20.     

  21. 若   

  22.     

  23. 有   

  24.     

  25. 任   

  26.     

  27. 何   

  28.     

  29. 問   

  30.     

  31. 題   

  32.     

  33. 還   

  34.     

  35. 請   

  36.     

  37. 多   

  38.     

  39. 留   

  40.     

  41. 言   

  42.     

  43. 指   

  44.     

  45. 教   

  46.     

  47. 了   

  48. </pre >  

  49. </body>  

接著來看CSS中的語法：
 CSS

CSS Code復(fù)制內(nèi)容到剪貼板
    css

  1. body{   

  2.  /* 設(shè)定背景圖片 */  

  3.  background-image:url("sakuya_and_remi.jpg");   

  4.  /* 讓圖片不重覆排列 */  

  5.  background-repeat:no-repeat;   

  6.  /* 固定背景圖片位置 */  

  7.  background-attachment:fixed;   

  8. }  

只要把 background-attachment 設(shè)成 fixed 就能固定背景圖片了。若是要取消固定的話，只要把 background-attachment 拿掉或是設(shè)成 none 就行了。而其中的 background-repeat 設(shè)成 no-repeat 是避免當(dāng)背景圖片太小張時(shí)，讓它不要重覆的顯示。

還有另一種常見的情況是，背景圖片本身就只是小小張的，但想讓它固定在網(wǎng)頁的某一位置的話，我們除了用 background-attachment 之外，還要搭配 background-position 來一起使用。

Body一樣不變，直接看CSS的部份：
 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

  1. body{   

  2.  /* 設(shè)定背景圖片 */  

  3.  background-image:url("logo.gif");   

  4.  /* 讓圖片不重覆排列 */  

  5.  background-repeat:no-repeat;   

  6.  /* 固定背景圖片位置 */  

  7.  background-attachment:fixed;   

  8.  /* 設(shè)定背景圖片在右下角 */  

  9.  background-position:rightright bottombottom;   

  10. }  

background-position 值的設(shè)定可用數(shù)字加單位、數(shù)字加百分比或是使用關(guān)鍵字。background-position 基本上需要兩各值，第一個(gè)是距離左邊界的值，另一個(gè)則是距離上邊界的值。但是若是要在中間的話，可以設(shè)一個(gè) center 就可以了，另一個(gè)若沒有的話，會(huì)自動(dòng)認(rèn)為也是 center。

background-position 位置的相對關(guān)系可以參考下面的圖解。

怎樣~是不是很簡單呢！以上就是CSS固定頁面背景圖像定位方法。


該文章在 2023/7/19 22:48:45 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved