視差の背景画像とその背後にあるコンテンツの端を明らかにする

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インデックスは4ですが、上に重なっていません。

イメージを拡大しないようにするにはどうすればよいですか？マウスを動かすと少し伸びますが、エッジが見えません。

"Planet"のテキストの下にある画像の下に現在コンテンツを作成する最良の方法は何ですか？

Answer 1

背景画像をビューポートに覆うには、次のように設定します。 背景サイズ：cover; バックグラウンドポジション：50％50％;

CSSで0または-1のようなコンテンツの各画像とZインデックスを低くします。マウスオーバーでは、背景位置はJSに基づいて変更されます

そして、エッジが見えない場合は、 を使用してください。transform：scale（x）; 1を超えるとビューポートの上に画像が表示されますが、縦横比は維持されます