CSS全屏背景 - 跳躍當頁面更改

我通過使用一個全尺寸的背景：CSS全屏背景 - 跳躍當頁面更改

background: url(/static/img/background/my_bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

Q1。當我的頁面展開以顯示額外內容時，bg會跳躍變大，有沒有辦法阻止它？ Q2302。 IE7-8的封面bg是一個很好的解決方案或備份嗎？

感謝

來源

2013-05-05 panthro

您必須使用沉重的圖像，試圖壓縮它 – 2013-05-05 17:32:52

我不認爲你理解這個問題。圖片加載正常，頁面增加時，頁面大小增加。我不想增加bg尺寸。 – panthro 2013-05-05 18:25:47

因此，如果您不希望大小增加以便從CSS中移除屬性，那麼封面將會將bg大小增加到100 – 2013-05-05 18:26:50

糾正我，如果我錯了，但我假設你想保持你的背景圖片從擴張/垂直移動，對不對？如果是這樣的話，那麼也許這CSS會做你希望它是什麼：

background-image: url('/static/img/background/my_bg.jpg'); 
    background-size: auto 1080px; 
    background-position: center top; 
    background-repeat: no-repeat;

背景垂直尺寸設置爲1080px，但你可以設置任何你想要只所以它是一個靜態值（寬度的auto *值將簡單地保留您的圖像寬高比）。這應該使圖片不能縮放。使用中心頂部進行定位而不是中心中心應該將您的圖片固定在頂部中間位置，以便在頁面垂直展開時不會向下移動。

如果你想縮小圖像但只能縮放到某一點，我認爲你需要使用Div標籤來包含整個頁面，並將圖像設置爲Div的背景。從那裏你應該能夠設置你的圖像縮放，並設置最大寬度和最大高度。

如果這沒有幫助，關於您試圖實現的效果的更多信息將不勝感激。 :)

來源

2013-05-05 18:27:12

CSS全屏背景 - 跳躍當頁面更改

回答

相關問題