Размытие div размывает другие divs

Question

Когда я размываю div, другие divs рядом с ним также становятся размытыми и полупрозрачными на краю возле размытого div.

Вот демонстрация: http://codepen.io/anon/pen/ezpdy

Как я могу предотвратить другие дивы от получения размыты?

Answer 1

Простейшим решением является размещение .background-image позади всех остальных элементов. http://codepen.io/anon/pen/driDz

.background-image { 
    z-index: -1; 
} 

Или поставить #test над .background-image

#test { 
    position: relative; 
    z-index: 2; 
} 

Оба способа работают нормально.

Answer 2

#test не размывается. Потому что .background-image размывается 5px, он влияет на 5px вокруг него.