奇妙な空白の上<img>

Question

私はJavaScriptでスライダに取り組んできた、と私はそうのような背景として画像を追加してきた：のために、

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

このコード：

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

CSS何らかの理由でこの結果が得られます：

position: absoluteを持っていないとすべてが素晴らしいですが、私はそうする必要がありますz-indexを適用し、実際に画像の上にスライドコンテンツを収めてください。 position: absoluteがなければ、このような結果が得られます。

Answer 1

はtop:0;

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

あなたのCSSに追加します