<img> 上方的奇怪空白

Question

我一直在 JavaScript 中制作滑块，我一直在添加图像作为背景，如下所示：

<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;
}

<img> 上方的奇怪空白

Weird Whitespace Above <img>

html

css

position