古怪的空白以上<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; 
}