使 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 的背景对齐。您的方法目前可能工作正常，但稍后如果/当您尝试使背景可缩放（取决于用户的屏幕尺寸）时，您将运行遇到问题！

祝你好运！

使 div 的背景与 body 背景合并

Making div's background merge with body background

html

css

background

background-image