視差背景揭示了圖像的邊緣和背後的內容

Question

我剛開始着眼於創建一個視差風格的頁面，其中的元素遵循鼠標。

我已經看過一些教程，到目前爲止我的效果工作，但是背景的圖像已超大尺寸。

標準變焦：

正如你所看到的圖像的邊緣顯露並且還後面的內容不應該在那裏（提及進一步下跌）

它看起來應該像這樣：

和主文本圖像應該在中心。

的HTML

<div class="background"></div> 

<div class="middleground-container"> 
    <div class="middleground"></div> 
</div> 

<div class="foreground"> 
    <div>Test text</div> 
</div> 

<div class="content">Cras nec massa non ex congue hendrerit eget nec lorem. Proin vestibulum ligula sit amet sapien pulvinar tincidunt. Suspendisse potenti. Nam dui velit, porttitor quis convallis eget, fringilla sit amet massa. Donec consectetur fringilla pharetra. Nam pellentesque odio arcu, at lacinia libero mollis a. Mauris quis blandit purus, id porttitor enim. Praesent finibus, nisl vitae porta consectetur, purus mauris eleifend odio, sed dignissim libero lorem in magna. Quisque lobortis enim et velit imperdiet, lacinia malesuada tortor facilisis.</div> 

<script src="scripts.js"></script> 

CSS

.background 
{ 
    z-index: 1; 
    position: absolute; 
    background: url('pictures/switzerland.jpg') no-repeat; 
    width: 100%; 
    height: 100%; 
} 

.middleground 
{ 
    z-index: 2; 
    position: absolute; 
    background: url('pictures/ExploreOurPlanet.png') no-repeat; 
    width: 100%; 
    height: 100%; 
} 

.foreground 
{ 
    z-index: 3; 
    position: absolute; 
    background: url('http://placehold.it/350x350&text=Foreground'); 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
} 

.content 
{ 
    z-index: 4; 
} 

JQuery的

$(document).ready(function() { 
    var strength1 = 50; 
    var strength2 = 100; 
    var strength3 = 200; 
    $("html").mousemove(function(e) 
    { 
     var pageX = e.pageX - ($(window).width()/2); 
     var pageY = e.pageY - ($(window).height()/2); 
     var newvalueX = 1* pageX * -1; 
     var newvalueY = 1* pageY * -1; 
     $('.background').css("background-position", (strength1/$(window).width() * pageX * -1)+"px "+(strength1/$(window).height() * pageY * -1)+"px"); 
     $('.middleground').css("background-position", (strength2/$(window).width() * pageX * -1)+"px "+(strength2/$(window).height() * pageY * -1)+"px"); 
     $('.foreground').css("background-position", (strength3/$(window).width() * pageX * -1)+"px "+(strength3/$(window).height() * pageY * -1)+"px"); 
    }); 
}); 

正如之前提到的，我有一些虛擬內容被寫出來，但是它出現在圖像後面，在CSS中，我有一個z-index爲4的內容，但它不覆蓋頂部。

我如何讓圖像不是如此放大，但稍微拉伸，所以當我移動鼠標我沒有看到邊緣？

從「探索星球」文本中縮小圖片下方的內容的最佳方式是什麼？

Answer 1

通過設置將背景圖像覆蓋到視口： Background-size：cover; 背景位置：50％50％;

對於CSS中的每個圖像和較低的z-index，例如0或-1的內容。並且在Mouseover中，背景位置將根據您的JS

而改變並且如果您沒有邊緣要查看，請使用transform：scale（x）;大於1可以越過視口上方的圖像但保持縱橫比