DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> css控制背景圖像不隨滾動條的滾動而滾動
css控制背景圖像不隨滾動條的滾動而滾動
編輯:CSS特效代碼     
體驗效果:
http://hovertree.com/texiao/css3/38/

這幾天在寫一個demo,設置背景圖像,

background: url("http://hovertree.com/hvtimg/bjafjc/wpirf7t5.png") repeat ;

在使用

$(window).scroll(function() {
....
});

監聽滾動條時,在google下正常運行,背景圖像沒有異常

在ie、360、火狐下滾動滾動條時,背景圖像一閃一閃的,很難受。

百度:說需要調顯示器的監視器的屏幕刷新頻率 > 70 Hz 。

可是我的電腦只有60Hz ,那麼問題來了,很多小伙伴的電腦或許跟我的一樣,那怎麼辦呢?經過多方查找,終於找到了這麼一個屬性

 background-attachment 屬性 原文是這樣講的

背景關聯

如果文檔比較長,那麼當文檔向下滾動時,背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時,圖像就會消失。

您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性,可以聲明圖像相對於可視區是固定的(fixed),因此不會受到滾動的影響:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

background-attachment 屬性的默認值是 scroll,也就是說,在默認的情況下,背景會隨文檔滾動。

找到原因所在,接下來就很愉快了,只需要把背景設置成

background: url("http://hovertree.com/hvtimg/bjafaj/hm1uwx31.jpg") repeat fixed ;

說句題外話,以前在學css的時候,肯定有學過這個屬性,可是沒放在心上,看來以後學東西還是需要多思考。

那麼還有個問題,為什麼在Google下沒問題呢?

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved