Создание слияния фона div с фоном тела

Question

Я пытаюсь решить проблему без использования js, но я не знаю, возможно ли это. У меня есть div в середине страницы. Я сделал это невидимым, сделав слияние div и body с помощью css. Проблема у меня в том, что если я переведу div, она по-прежнему практически невидима, потому что фон не движется с ней. Использование «background-position: fixed» закручивает слияние.

Любые идеи?

Вот мой css, вы можете увидеть проект here (просто откройте его и нажмите в любом месте).

body{ 
     background: url(../img/forest.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
    .panel{ 
     position: absolute; 
     margin: auto; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     width: 400px; 
     height: 200px; 
     z-index: 2; 

     background: url(../img/forest.jpg) no-repeat center center fixed; 
     -webkit-background-size: inherit; 
     -moz-background-size: inherit; 
     -o-background-size: inherit; 
     background-size: inherit; 
     transition: all 0.5s; 
    } 
    .panel.hover{ 
     top:-400px; 
    } 

Answer 1

Если вы хотите продолжить с помощью метода, который вы используете, я хотел бы предложить, глядя в CSS:

background-position 

недвижимости ...

Вы можете найти W3 страницу here.

Однако я бы вместо того, чтобы предложить сделать следующее:

Вместо того, чтобы пытаться выровнять фон меньшего DIV с внешним DIV, просто сделать непрозрачность DIV 0 по умолчанию, и установите его в 1 при наведении. Вы можете использовать свойство непрозрачности, как например:

opacity: 0; 

таким образом, вам не нужно беспокоиться о том, пытаясь выровнять фон меньшего DIV с большим дел. На данный момент вы можете работать OKAY, но позже, если вы попытаетесь сделать фоновое масштабируемое (в зависимости от размера экрана пользователя), у вас возникнут проблемы!

Удачи вам!