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属性：

opacity: 0;

这样您就不必担心尝试将较小div的背景与较大的div对齐。您现在可以使用OKAY方法，但是稍后如果/当您尝试使后台可扩展时（取决于用户的屏幕大小），您将遇到问题！

祝你好运！

使div的背景与身体背景合并

1 个答案: