html - 使div的背景与 body 背景合并

Question

我正在尝试不使用 js 来解决问题，但我不知道是否可行。我在页面中间有一个 div。我通过使用 css 合并 div 和 body 的背景使其看起来不可见。我遇到的问题是，如果我移动 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 的背景与较大的 div 对齐。您的方法目前可能工作正常，但稍后如果/当您尝试使背景可缩放(取决于用户的屏幕尺寸)时，您将遇到问题!

祝你好运!