欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

[點晴永久免費OA]CSS固定頁面Body背景圖像定位方法
admin
2023年7月19日 22:48 本文熱度 1021

導讀

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


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

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

XML/HTML Code復制內(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復制內(nèi)容到剪貼板
    css

  1. body{   

  2.  /* 設定背景圖片 */  

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

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

  5.  background-repeat:no-repeat;   

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

  7.  background-attachment:fixed;   

  8. }  

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

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

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

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

  1. body{   

  2.  /* 設定背景圖片 */  

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

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

  5.  background-repeat:no-repeat;   

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

  7.  background-attachment:fixed;   

  8.  /* 設定背景圖片在右下角 */  

  9.  background-position:rightright bottombottom;   

  10. }  

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

background-position 位置的相對關系可以參考下面的圖解。

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


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