Recibí una solicitud hoy para usar el efecto de desenfoque gaussiano para desenfocar una página. Aproveché esta oportunidad para clasificar las dos API del desenfoque gaussiano en CSS3.
ilustrar:
Esta API es un filtro que no solo puede lograr un desenfoque gaussiano, sino también muchas otras cosas, como compensación de color, saturación, escala de grises, etc.
gramática:
// Usa espacios para separar múltiples filtros filter: none; //Filtro de desenfoque gaussiano: desenfoque(4px); //Filtro de brillo lineal: brillo(); // Filtro de contraste: contraste(); // Filtro de efecto de sombra: drop-shadow(); //Filtro de escala de grises: escala de grises(); // Filtro de rotación de tono: hue-rotate(); //Invertir filtro de imagen: invert(); //Convertir filtro de transparencia: opacidad(); // Filtro de saturación: saturar(); // filtro marrón: sepia(); // filtro de filtro SVG: url();
Entre ellos filter: blur();
ilustrar:
Cuando crea un elemento y agrega este atributo, agregará efectos (como desenfoque o cambio de color) al área detrás del elemento.
contraste:
El atributo de filtro debe cargarse en la imagen o imagen de fondo, mientras que el filtro de fondo solo debe ser un elemento.
gramática:
filtro de fondo: desenfoque (2px); filtro de fondo: brillo (60%); filtro de fondo: contraste (40%); filtro de fondo: sombra paralela (4px 4px 10px azul); filtro de fondo: escala de grises (30%); filtro de fondo: rotación de tono (120 grados); filtro de fondo: invertir (70%); filtro de fondo: opacidad (20%); filtro de fondo: sepia (90%); filtro de fondo: saturar (80%);
<!DOCTYPE html>
<html lang="es">
<cabeza>
<estilo>
.wrapBox2 {
ancho: 800px;
altura: 300 píxeles;
desbordamiento: oculto;
posición: relativa;
imagen de fondo: url("./win.jpeg");
tamaño de fondo: 100% 100%;
repetición de fondo: no repetición;
filtro: desenfoque (10px);
}
.subcuadro {
posición: absoluta;
ancho: calc(100% - 100px);
altura: calc(100% - 100px);
índice z: 2;
}
.texto {
posición: relativa;
/* índice z: 10 */
tamaño de fuente: 40px;
peso de fuente: negrita;
color: #f00;
}
</estilo>
</cabeza>
<cuerpo>
<div clase="wrapBox2">
<div clase="subBox"></div>
<div class="text">Desenfocar todo</div>
</div>
</cuerpo>
</html> 
Una cosa a tener en cuenta aquí es que después de agregar desenfoque, el tamaño real excederá el ancho y el alto que configuramos debido al efecto de rebabas circundante. Puede envolver una capa afuera y configurar overflow: hidden;
<!DOCTYPE html>
<html lang="es">
<cabeza>
<estilo>
.wrapBox2 {
ancho: 800px;
altura: 300 píxeles;
/* desbordamiento: oculto */
posición: relativa;
}
.subcuadro {
ancho: 100%;
altura: 100%;
posición: absoluta;
ancho: calc(100% - 100px);
altura: calc(100% - 100px);
índice z: 2;
filtro: desenfoque (10px);
}
.texto {
posición: relativa;
/* índice z: 10 */
tamaño de fuente: 40px;
peso de fuente: negrita;
color: #f00;
}
</estilo>
</cabeza>
<cuerpo>
<div clase="wrapBox2">
<img src="./win.jpeg" class="subBox" />
<div class="text">Desenfocar todo</div>
</div>
</cuerpo>
</html> 
De esta manera, dado que el texto y la imagen están al mismo nivel, el texto está debajo o encima de la imagen (controlado según el índice z) sin difuminar el texto.
<!DOCTYPE html>
<html lang="es">
<cabeza>
<estilo>
.wrapBox2 {
ancho: 800px;
altura: 300 píxeles;
desbordamiento: oculto;
posición: relativa;
imagen de fondo: url("./win.jpeg");
tamaño de fondo: 100% 100%;
repetición de fondo: no repetición;
}
.subcuadro {
posición: absoluta;
ancho: calc(100% - 100px);
altura: calc(100% - 100px);
índice z: 2;
filtro de fondo: desenfoque (10px);
/* arriba: 100px */
}
.texto {
posición: relativa;
/* índice z: 10 */
tamaño de fuente: 40px;
peso de fuente: negrita;
color: #f00;
}
</estilo>
</cabeza>
<cuerpo>
<div clase="wrapBox2">
<div clase="subBox"></div>
<div class="text">Parcialmente borroso</div>
</div>
</cuerpo>
</html> 
Como puede ver, no es necesario establecer el atributo de filtro de fondo en un elemento de imagen, sino en cualquier elemento. Creo que este método es más flexible.
Por supuesto, usar el filtro de fondo también puede satisfacer el primer escenario.
Con esto concluye este artículo sobre el uso de CSS de filtro y filtro de fondo para lograr el efecto de desenfoque gaussiano (código de muestra). Para obtener más contenido relacionado con el desenfoque gaussiano de CSS, busque artículos anteriores en downcodes.com o continúe explorando los artículos relacionados a continuación. ¡Apoyarás más a downcodes.com en el futuro!