poner - Desenfoque de CSS en la imagen de fondo pero no en el contenido

imagen de fondo css pantalla completa

Question

Hice este ejemplo .

Estoy intentando difuminar la imagen de fondo, pero el contenido principal también está borroso (el <span> )

¿Cómo puedo desenfocar el fondo sin desenfocar el contenido?

Answer 1

Agrega otra div o img a tu div principal y difumina eso en su lugar. jsfiddle

.blur {
    background:url(''http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465'') no-repeat center;
    background-size:cover;
    -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    filter: blur(13px);
    position:absolute;
    width:100%;
    height:100%;
}

Answer 2

Podrías superponer un elemento sobre el elemento borroso como tal

DEMO

div {
    position: absolute;
    left:0;
    top: 0;
}
p {
    position: absolute;
    left:0;
    top: 0;
}

Answer 3

jsfiddle .

<div> 
    <img class="class" src="http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465">
    </img>
    <span>
        Hello World!
    </span>
</div>

Que hay de esto No hay posicionamiento absoluto en div, sino en img y span.

Answer 4

jsfiddle

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);

    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}

Puede desenfocar la imagen de fondo del cuerpo utilizando el cuerpo de: antes de la pseudo clase para heredar la imagen y luego difuminarla. Envuelve todo eso en una clase y usa javascript para agregar y eliminar la clase para difuminar y desenfocar.