亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解使用CSS固定頁面背景圖片位置的方法

abgne   發(fā)布時間：2016-05-17 12:14:46   作者：佚名   我要評論
固定背景圖片的通常方法就是把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)容到剪貼板
  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 位置的相對關系可以參考下面的圖解。
2016517121133823.gif (280×280)

怎樣~是不是很簡單呢！

相關文章

  • css background-attachment屬性進階

    前提是定義了background-image屬性，然后用background-attachment來指明背景圖的位置是固定于視口的，還是隨著包含塊移動的。可簡單理解為定義背景圖片隨滾動軸的移動方式
    2017-03-08

  • css 背景固定樣式background-attachment屬性基礎

    這篇文章主要為大家介紹了在CSS中，使用背景附件屬性background-attachment可以設置背景圖像是隨對象滾動還是固定不動,需要的朋友可以參考下
    2017-03-08

  • css background 背景圖的設置方法

    下面小編就為大家?guī)硪黄猚ss background 背景圖的設置方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-30

  • CSS background全部匯總

    下面小編就為大家?guī)硪黄狢SS background全部匯總。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-19

  • CSS的background屬性及CSS3的背景圖片設置總結

    這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設置總結,背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下
    2016-06-13

  • CSS制作邊框效果的技巧總結

    邊框在Web頁面的內(nèi)容塊中非常常用,這里為大家整理了CSS制作邊框效果的技巧總結,尤其是第三種方案的background-origin利用十分討巧,需要的朋友可以參考下
    2016-05-27

  • 使用CSS3來實現(xiàn)滾動視差效果的教程

    這篇文章主要介紹了使用CSS3來實現(xiàn)滾動視差效果的教程,主要使用到了background-attachment屬性,需要的朋友可以參考下
    2015-08-24

  • css 中background 設置文本框背景圖 的方法

    這篇文章主要介紹了css 中background 設置文本框背景圖 的方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-07-22

最新評論