欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

abgne   發(fā)布時(shí)間：2016-05-17 12:14:46   作者：佚名   我要評(píng)論
固定背景圖片的通常方法就是把background-attachment設(shè)成fix,進(jìn)一步的話自然則是用background-position,下面來詳解使用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. 請(qǐng)   
  36.     
  37. 多   
  38.     
  39. 留   
  40.     
  41. 言   
  42.     
  43. 指   
  44.     
  45. 教   
  46.     
  47. 了   
  48. </pre >  
  49. </body>  

接著來看CSS中的語法：
 CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  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 位置的相對(duì)關(guān)系可以參考下面的圖解。
2016517121133823.gif (280×280)

怎樣~是不是很簡單呢！

相關(guān)文章

  • css background-attachment屬性進(jìn)階

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

  • css 背景固定樣式background-attachment屬性基礎(chǔ)

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

  • css background 背景圖的設(shè)置方法

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

  • CSS background全部匯總

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

  • CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)

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

  • CSS制作邊框效果的技巧總結(jié)

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

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

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

  • css 中background 設(shè)置文本框背景圖 的方法

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

最新評(píng)論