إليك بنية 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 هذا التأثير من الوصول إلى العناصر الفرعية، مما يؤدي إلى ظهور عناصر فرعية حادة ومركزة على خلفية غير واضحة.