html - glass - ¿Cómo puedo hacer que un efecto de vidrio/desenfoque CSS funcione para una superposición?

filter blur transparent

Question

Tengo problemas para aplicar un efecto de desenfoque en una superposición semitransparente div. Me gustaría que todo lo que está detrás del div sea borroso, así:

Aquí hay un jsfiddle que no funciona: http://jsfiddle.net/u2y2091z/

¿Alguna idea de cómo hacer que esto funcione? Me gustaría mantener esto lo más sencillo posible y tenerlo en todos los navegadores. Aquí está el CSS que estoy usando:

#overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background:black;
background:rgba(0,0,0,0.8);
filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);
}

Answer 1

¡Gracias a todos por la ayuda! Pude juntar información de todos aquí y de Google, y se me ocurrió lo siguiente que funciona en Chrome y Firefox: http://jsfiddle.net/u2y2091z/12/ . Todavía estoy trabajando para que esto funcione para IE y Opera.

La clave es poner el contenido dentro del div al que se aplica el filtro:

<div id="mask">
<p>Lorem ipsum ...</p>
<img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

Y luego el CSS:

#mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg''><filter id=''svgMask''><feGaussianBlur stdDeviation=''10'' /></filter></svg>#svgMask");
}

Entonces la máscara tiene los filtros aplicados. También tenga en cuenta el uso de url () para un filtro con una etiqueta <svg> para el valor; esa idea proviene de http://codepen.io/AmeliaBR/pen/xGuBr . Si minimizas tu CSS, es posible que necesites reemplazar cualquier espacio en el marcado del filtro SVG con "% 20".

Entonces, todo dentro de la máscara div está borroso.

Answer 2

Aquí hay un ejemplo que usa el filtro svg .

La idea es usar un elemento svg con height igual a la #overlay y aplicar el filtro feGaussianblur en él. Este filtro se aplica en un elemento de image svg . Para darle un efecto extruido, puede usar una box-shadow en la parte inferior de la superposición.

Soporte de navegador para filtros svg .

Demostración en Codepen

body {
background: #222222;
}
#container {
position: relative;
width: 450px;
margin: 0 auto;
}
img {
height: 300px;
}
#overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
color: rgba(130, 130, 130, 0.5);
font-size: 50px;
text-align: center;
line-height: 100px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

<div id="container">
<img src="http://lorempixel.com/450/300/sports" />
<div id="overlay">WET</div>
<svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" />
</svg>
</div>

Answer 3

Aquí hay una posible solución.

HTML

<img id="source" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
<div id="crop">
<img id="overlay" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

CSS

#crop {
overflow: hidden;
position: absolute;
left: 100px;
top: 100px;
width: 450px;
height: 150px;
}
#overlay {
-webkit-filter:blur(4px);
filter:blur(4px);
width: 450px;
}
#source {
height: 300px;
width: auto;
position: absolute;
left: 100px;
top: 100px;
}

Sé que el CSS se puede simplificar y probablemente deba deshacerse de los identificadores. La idea aquí es usar un div como contenedor de recorte y luego aplicar desenfoque en el duplicado de la imagen. Fiddle

Para hacer que esto funcione en Firefox, tendrías que usar el hack de SVG .

Answer 4

Si está buscando un enfoque confiable entre navegadores hoy , no encontrará uno excelente. La mejor opción que tiene es crear dos imágenes (esto podría automatizarse en algunos entornos) y organizarlas de modo que una superponga a la otra. He creado un ejemplo simple a continuación:

<figure class="js">
<img src="http://i.imgur.com/3oenmve.png" />
<img src="http://i.imgur.com/3oenmve.png?1" class="blur" />
</figure>

figure.js {
position: relative;
width: 250px; height: 250px;
}
figure.js .blur {
top: 0; left: 0;
position: absolute;
clip: rect( 0, 250px, 125px, 0 );
}

Aunque es efectivo, incluso este enfoque no es necesariamente ideal. Dicho esto, produce el resultado deseado .

Answer 5

#bg, #search-bg {
background-image: url(''https://images.pexels.com/photos/719609/pexels-photo-719609.jpeg?w=940&h=650&auto=compress&cs=tinysrgb'');
background-repeat: no-repeat;
background-size: 1080px auto;
}
#bg {
background-position: center top;
padding: 70px 90px 120px 90px;
}
#search-container {
position: relative;
}
#search-bg {
/* Absolutely position it, but stretch it to all four corners, then put it just behind #search''s z-index */
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 99;
/* Pull the background 70px higher to the same place as #bg''s */
background-position: center -70px;
-webkit-filter: blur(10px);
filter: url(''/media/blur.svg#blur'');
filter: blur(10px);
}
#search {
/* Put this on top of the blurred layer */
position: relative;
z-index: 100;
padding: 20px;
background: rgb(34,34,34); /* for IE */
background: rgba(34,34,34,0.75);
}
@media (max-width: 600px ) {
#bg { padding: 10px; }
#search-bg { background-position: center -10px; }
}
#search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; }
#search h2 { margin-bottom: 50px }
#search h5 { margin-top: 70px }

<div id="bg">
<div id="search-container">
<div id="search-bg"></div>
<div id="search">
<h2>Awesome</h2>
<h5><a href="#">How it works »</a></h5>
</div>
</div>
</div>