수정된 HTML 구조는 다음과 같습니다.

    

    

        

            
        
        

             a div wih all sort of information
        
    

CSS:

.content {
    float: left;
    width: 100%;
}

.content .overlay {
    background-image: url('images/zwemmen.png');
    height: 501px;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index: 0;
}

.opacity {
    background-color: rgba(5, 98, 127, 0.9);
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

이 설정에서 .overlay 요소에는 흐림 효과가 적용되는 반면 .opacity 요소는 이 효과가 하위 요소에 도달하는 것을 차단하여 흐린 배경 위에 선명하고 집중된 하위 요소를 만듭니다.