Efecto de desenfoque en toda la página web

Question

Quiero que los usuarios no registrados en mi sitio web, vean las páginas de todo el sitio con un efecto borroso.

¿Cómo puedo crear este efecto de desenfoque con css?

Answer 1

He aquí algunos resultados, si por falta de definición quiere decir falta de claridad:

Este tipo utiliza movedizas y opacidad técnicas de imagen en combo, sé que sus usuarios están buscando en un sitio web borrosa, pero si no hay una solución fácil entonces tal vez tomar una instantánea de la página de Rego y superponer la imagen, entonces puede hacer:

http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur

Si quería intentar duplicar su página de rego, dado que puede ser: a) discapacitado y b) un mínimo, th es quizás incluso podría tener un golpe al usar la técnica de imagen anterior y aplicarla a conjuntos de nodos, compensando las copias con CSS positioning y opacity - idk si el zoom podría ayudarlo también allí. Incluso si su página era lo suficientemente mínima, esto obviamente requeriría Javascript para duplicar los nodos, a menos que su servidor pueda hacer esta duplicación de nodos. Solo una idea, de verdad. Aquí hay una realmente horrible ejemplo, muy rápido:

http://jsfiddle.net/9qnsz/2/

esto para que los mensajes se describen algunas de las limitaciones y dificultades con el desenfoque gaussiano cuando no se hace con la imagen, y tiene algunos enlaces interesantes:

Gaussian Blur onHover Using jQuery

---

EDIT: Conforme a lo solicitado, el contenido de la jsFiddle:

<div class="container"> 
    <div class="overlay"> 
     <p>Please register etc etc...</p> 
    </div> 

    <form action="javascript:;" class="form0"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form1"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form2"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form3"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form4"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 

</div>​ 


.container { 
    width:500px; 
    height:500px; 
    position:relative; 
    border:1px solid #CCC; 
} 
    form { 
     position:absolute; 
     left:10px; 
     top:10px; 
    } 
    form.form0 { 
     left:11px; 
     top:11px; 
     opacity:0.1; 
    } 
    form.form1 { 
     left:8px; 
     top:8px; 
     opacity:0.1; 
     zoom:1.02; 
    } 
    form.form2 { 
     left:11px; 
     top:11px; 
     opacity:0.1; 
     zoom:1.01; 
    } 
    form.form3 { 
     left:9px; 
     top:9px; 
     opacity:0.2; 
    } 
    form.form4 { 
     left:11px; 
     top:11px; 
     opacity:0.1; 
    } 

    .overlay { 
     width:250px; 
     height:250px; 
     margin-top:50px; 
     margin-left:auto; 
     margin-right:auto; 
     border:1px solid #666; 
    } 

Answer 2

Puede agregar un conjunto div fijo al 100% de ancho y alto a su body. Eso llenará la pantalla y puede poner un fondo semitransparente o usar CSS3 para crear el efecto que está buscando.

Answer 3

Crear una nueva etiqueta con divid="body_bag" y poner su resto del sitio edita dentro de ese div y el uso siguiente CSS para dar el efecto de desenfoque.

#body_bag { 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background: #000; 
    opacity: 0.5; 
    filter: alpha(opacity = 50); /* required for opacity to work in IE */ 
} 

Answer 4

Editar (2015): La propiedad filter css se está formando tantalisingly complete coverage. Esto le permite escribir reglas como body { filter: blur(10px); }, que desenfoca toda la página.

---

De lo que puedo decir, no hay manera de multi-navegador de desdibujar un elemento, incluso en esta "era moderna" de HTML5, CSS3, etc ...

Hay una blur filter para IE (y solo IE). Un svg blur filter también puede ser applied to an html element, pero por lo que puedo decir, solo funciona en Firefox.

Si está contento con los hacks específicos del navegador, siga adelante, pero si necesita que el efecto funcione en todos los navegadores, no tiene suerte.

Si simplemente desea desenfocar texto, se puede utilizar un inteligente truco text-shadow:

.blurry { 
    color: transparent; 
    text-shadow: 0 0 3px black; /* set to colour you want */ 
} 

también hay formas de difuminar las imágenes, ya sea mediante la superposición transparente, desplazado copias de la imagen, o por processing the data with javascript.

Tal vez pueda improvisar estas técnicas y logre lo que desea.

Pero la respuesta amplia, lamentablemente, por el momento es: no hay una forma fácil, holística de difuminar cosas en HTML.

(pensé que estábamos viviendo en el futuro, el hombre ?! Lo que da?)

Adición: esperanza está a la vista. En el momento de escribir estas líneas, algunas compilaciones de webkit cada noche ("vanguardista") están implementando algunas de las nuevas css filter specification. Esa demostración no funciona en ningún navegador webkit que haya instalado, por lo que todavía está lejos de la corriente principal.

Answer 5

Prueba esto ...

body { 
    filter:blur(3px); 
} 

Usted tendrá que añadir -moz-, prefijos -webkit- (o usar algo como PrefixFree)

efecto borroso