奇怪的空白<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;
}