背景圖像平移背景大小：封面？

用鼠標移動時與下面的代碼背景圖像平移背景大小：封面？

$('body').mousemove(function(e){ 
    var mousePosX = 50 + (e.pageX/$(window).width())*25; 
    var mousePosY = 50 + (e.pageY/$(window).height())*25; 
    $('body').css('backgroundPosition', mousePosX + '% ' + mousePosY + '%'); 
});

這與（在寬度例如2000像素）的較大的背景圖像完美地工作我目前平移我的網站的背景圖像。有沒有辦法做到這一點，但與

background-size: cover;

？乍一看，它不會也不應該工作，因爲背景圖像總是與瀏覽器大小相同，因此無法平移。由於瀏覽器窗口從來不是最大高度（書籤工具欄等的原因），它雖然可以垂直移動。是否可以有一個「封面背景」，但調整一些像素的背景圖像的大小，所以它比視口稍大，但也會自動調整大小？

來源

2013-04-18 Grimwood

body{ 
    background:url(IMAGE); 
    background-size: 110%; 
    background-position: -10px -10px; 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
}

來源

2013-04-18 21:03:04

這很容易......不知何故，我沒有意識到「封面」與「100％」是一樣的;）謝謝！ – Grimwood

剛剛意識到它畢竟不是一樣的：/背景大小與％伸展背景圖像（vs與「封面」保持正確的長寬比... – Grimwood

檢查更新。它只是現在拉伸寬度，但保持他右縱橫比。 –

背景圖像平移背景大小：封面？

回答

相關問題