如何讓背景圖片在縮放時保持不變？

Question

當有人放大在網頁上一樣，它會留作爲原始圖像（最好是在CSS如果這是可以做到）

Answer 1

我有一個背景圖像上身體設置和使用background-size: 100%得到它填補了屏幕。這將完成你正在嘗試做的事情。我不確定除了身體之外的任何元素都有好的方法。

Answer 2

我會認爲這需要JavaScript，因爲你需要弄清楚有多大的視口是本身......每當該視口被改變，這是無法檢測到的CSS ...這是哪裏的JavaScript進來你應該看看javascript/jquery resize瀏覽器事件。 jQuery通過http://api.jquery.com/resize/的一些例子很好地實現了這個功能，你應該很容易使用它。

他們給出的例子是當窗口被調整大小時添加身體的新寬度......當窗口被放大時，這是相同的觸發器。請看jsfiddle。我所做的是先插入新視口的寬度。然後我還重新調整了盒子的寬度和高度，以相對於視口的1/5。

神奇代碼：

$(window).resize(function() { 
    $('#log').append('<div>' + $(this).width() + '</div>'); 
}); 

和什麼樣的變化寬度：

if (logWidth == width/3) { 
    console.log("hooray."); 
} 
else { 
    console.log("resize the log please."); 
    logWidth = width/3; 
    $('#log').width(logWidth); 
} 

這如果else語句可以修改爲背景圖像的需求。

這給了我可以用來設置背景圖像/寬度/無論任何元素，我想要在任何調整大小事件的新寬度。

Answer 3

試試這個：

background-size: cover;  
background-attachment: fixed; 

這個link其他功能。