1. Inicio
  2. Pregunta y respuesta
  3. Desenfoque de página completa en CSS

Desenfoque de página completa en CSS

2008-12-16 18 views
21

¿Cómo puedo difuminar toda una página con CSS? Se permiten otros elementos, como imágenes.Desenfoque de página completa en CSS

Fuente

2008-12-16 Anonymous

+0

No estoy seguro para todos los navegadores (usar text-shadow como [tharkun sugiere] (http://stackoverflow.com/questions/371209#371226) es una solución posible). Pero usted no es el único que lo solicita, y puede agregar su voto a esta [solicitud de añadir efecto de desenfoque a CSS] (http://www.openajax.org/runtime/wiki/Blur_Effect). – VonC

Respuesta

0

Lo que usted está tratando de hacer, si no lo es sólo por diversión, no lo hacen :)

creo que tendría que bucle todos los elementos A través del filtro de desenfoque, que sólo funciona con IE y no con Firefox.

Aquí es una solución fea para lograr un desenfoque OMI fea en FF: http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/

Fuente

2008-12-16 12:59:16 markus

+2

¡Solo por diversión! :) –

7

No estoy seguro de si esto es lo que quiere decir, sino un efecto de desenfoque como se ve a menudo se crea mediante la creación de una altura total, completa ancho elemento DIV con un conjunto de propiedades de color de fondo y opacidad.

/* DIV-element with black background and 50% opacity set */ 
div.overlay { 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background: #000; 
    opacity: 0.5; 
    filter: alpha(opacity = 50); /* required for opacity to work in IE */ 
}

Desde su altura puede variar página, probablemente querrá usar Javascript para ajustar la altura de este elemento.

Fuente

2008-12-16 13:12:46

+0

¿No podría simplemente hacer la altura: 100%; ? –

+0

No. No existe una regla de navegador cruzada que defina 100% de altura, lamentablemente. –

+5

si desea utilizar esta guía, cambie la posición a fija, y puede establecer la altura en 100% – BigName

-1

En la pregunta del 100% de altura, no hay una solución CSS, incluso en CSS3, pero hay una manera JQuery de hacerlo. Si el elemento es #modal, defina todas las demás propiedades en el archivo CSS y ni siquiera mencione la propiedad height en el CSS. A continuación, poner el siguiente código de jQuery en el código HTML de la siguiente manera:

<script type="text/javascript"> 
$(function(){ 
    $('.modal') .css({'height': (($(window).height()))}); 
}); 
$(window).resize(function(){ 
    $('.modal') .css({'height': (($(window).height()))}); 
}); 
</script>

Esto requiere jQuery, por supuesto, y puede causar problemas si el contenido es más alto que el área de visualización. En cuanto a la capacidad de difuminar dinámicamente los contenidos que están detrás, eso es algo que me encantaría saber.

Fuente

2011-10-12 01:07:22

+1

Edita para el futuro. Ahora hay una forma de hacerlo increíblemente fácil: las unidades vh y vw. vh es la altura de la ventana gráfica, vw es el ancho de la ventana gráfica. por lo que establecer el modal a la altura completa y el ancho completo sería .modal {ancho: 100vw; altura: 100vh;}. –

4

Esto solo es posible en Firefox en este momento. Estos son los pasos (ver ejemplo here).

Necesita el tipo de documento XHTML (ya que estamos utilizando el marcado XML SVG).

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">

Inserta el elemento SVG donde debería aparecer el desenfoque.

<div class="blurDiv"></div> 
<svg:svg> 
    <!-- Filter --> 
    <svg:filter id="blurLayer"> 
     <!-- Blur and attributes --> 
     <svg:feGaussianBlur stdDeviation="0.9"/> 
    </svg:filter> 
</svg:svg>

Incluya el estilo en línea (no del archivo css externo).

<style type="text/css"> 
    div.blurDiv { filter:url(#blurLayer); } 
</style>

Esto le da un cierto desenfoque (como efecto disminuir el zoom), no el cristal transparente estándar de mirar a encontrar en cualquier otro lugar.

Fuente

2011-11-01 13:33:52

4

Aquí es una solución rápida y sucia, tomarlo y usarlo si quieren, probado en Firefox & cromo, pero debería funcionar en todos los navegadores compatibles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 

<html> 
    <head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Blur</title> 
<style type="text/css"> 
#f0,#f1,#f2{position:absolute;left:0px;top:0px;height:95%} 
#f0{filter:alpha(opacity=50);opacity: 0.15;-moz-opacity:0.15;z-index:15} 
#f1{filter:alpha(opacity=25);opacity: 0.25;-moz-opacity:0.25;z-index:2} 
#f2{filter:alpha(opacity=75);opacity: 0.75;-moz-opacity:0.75;} 
.fin{margin-right:auto;margin-left:auto} 
body{display:none} 
</style> 
<script type="text/javascript"> 
var winX=window.innerWidth-20; 
var winY=screen.availHeight-10; 
var count=0; 
var maxCount=50; 
var goBlur=true; 

function ele(id) { 
    return document.getElementById(id); 
} 
function runBlur() { 
    if(goBlur) { 
     for(var i=0; i<2; i++) { 
      var x = Math.random()<0.5?-1:1; 
      var y = Math.random()<0.5?1:-1; 
      if(ele("f"+i).offsetLeft >3) 
       x=-1; 
      else if(ele("f"+i).offsetLeft<-3) 
       x=1; 
      if(ele("f"+i).offsetLeft >3) 
       y=-1; 
      else if(ele("f"+i).offsetLeft<-3) 
       y=1; 

      ele("f"+i).style.left = (ele("f"+i).offsetLeft + x)+"px"; 
      ele("f"+i).style.top = (ele("f"+i).offsetTop + x)+"px"; 
     } 
    } 
    count++ 
    if(count>maxCount) { 
     count=0; 
     if(goBlur) 
      goBlur=false; 
     else 
      goBlur=true; 
     for(var i=0; i<3; i++) { 
      ele("f"+i).style.left = "0px"; 
      ele("f"+i).style.top = "0px"; 
     } 
    } 
    setTimeout("runBlur()",200); 
} 

function pageLoaded() { 
    var content = document.body.innerHTML; 
    var rewriteBody=""; 
    for(var i=0; i<3; i++) { 
     rewriteBody+='<div id="f'+i+'"><div class="fin">'+content+'</div></div>'; 
    } 
    document.body.innerHTML=rewriteBody; 
    setTimeout("setUp()",200); 
} 
function setUp() { 

    for(var i=0; i<3; i++) { 
     ele("f"+i).style.width=winX+"px"; 
    } 

    document.body.style.display="block"; 
    runBlur(); 
} 
</script> 
    </head> 
    <body onload="pageLoaded()"> 
<h1 style="color:#900">Page blur example</h1> 
You can put any page content and html you want here. 
    </body> 
</html>

Fuente

2012-01-27 23:09:37 coops

+0

+1 No es bonita, pero no merece los votos a favor sin comentarios. –

+0

Esto funciona en IE, Firefox, Chrome y Safari. Estoy de acuerdo en que no es bonita y que podría tener problemas en el futuro, ya que provocará un marcado no válido si utiliza cualquier identificación en su página. Pero +1 para pensar fuera de la caja. – Ben

23

Esto funciona en Firefox y WebKit mediante el filter: blur(radius). Ver Can I Use: CSS filters para qué navegadores pueden soportar esto.

.blurredElement { 

    /* Any browser which supports CSS3 */ 
    filter: blur(1px); 

    /* Firefox version 34 and earlier */ 
    filter: url("blur.svg#gaussian_blur"); 

    /* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */ 
    -webkit-filter: blur(1px); 
}

El blur.svg para Firefox 34 o por debajo se ve así:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <filter id="gaussian_blur"> 
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" /> 
     </filter> 
    </defs> 
</svg>

Se puede ajustar el radio, pero los valores más bajos significa un mejor rendimiento.

Fuente

2012-08-19 07:59:19 tobspr

7

Puede usar la propiedad filter con blur, aunque no es ampliamente compatible: http://jsfiddle.net/GkXdM/1/. Es compatible con Chrome, pero viene con una gran penalización de rendimiento cuando se usa en toda la página.

body { 
    filter: blur(2px); 
}

Fuente

2012-10-26 22:38:47 pimvdb

+0

forma más sencilla de difuminar cualquier contenedor. ¡Estupendo! –

8

demostración de la vida real aquí: http://premium.wpmudev.org/project/e-commerce/ (haga clic en el video).

Agregan la clase thickbox-open al cuerpo, cuando thickbox está abierto, y desde allí objetivo y estilo en su conjunto en el contenido (excepto superposición y emergente) que contiene elemento de este modo:

.thickbox-open #main-container { 
    -webkit-filter: blur(2px); 
    -moz-filter: blur(2px); 
    -ms-filter: blur(2px); 
    -o-filter: blur(2px); 
    filter: blur(2px); 
}

Bueno por lo que hay , todavía no se puede usar por completo (http://caniuse.com/css-filters), pero estamos llegando.

Aplicar a un elemento contenedor como el anterior en lugar de body ya que los elementos secundarios no pueden negar un filtro de desenfoque.

Fuente

2013-01-29 18:04:35

Cuestiones relacionadas

 Cuestiones relacionadas