html - 上方奇怪的空白

Question

我一直在用 JavaScript 开发 slider ，我一直在添加图像作为背景，如下所示:

<img class="slide-bg" src="path/to/some/photo.jpg" />

CSS:

.slide-bg {
    position: absolute;
    filter: blur(3px);
    -webkit-filter: blur(3px) grayscale(20%);
    z-index: -3;
    display: block;
    margin: 0;
    padding: 0;
}

出于某种原因，这段代码产生了这样的结果:

当我没有 position: absolute 时，一切都很好，但我需要有它，这样我才能应用 z-index 并实际拥有幻灯片内容适合图像的顶部。如果没有 position: absolute，它会产生这个结果:

Answer 1

将 top:0; 添加到您的 css

.slide-bg {
    position: absolute;
    filter: blur(3px);
    -webkit-filter: blur(3px) grayscale(20%);
    z-index: -3;
    display: block;
    margin: 0;
    padding: 0;
    top:0;
}