這幾天在寫一個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下沒問題呢?