Hablemos de los conceptos básicos sin ser demasiado detallados. A veces, la interfaz encontrará la necesidad de desenfocar el fondo, pero primero echemos un vistazo al efecto:
La siguiente es la implementación específica:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Fondo borroso</title></head><body> <div class=main><!-- Lo siguiente El fondo está borroso y el resto del contenido es claro--><!-- Capa de contenido--> <div class=banner> <div class=banner-contain> <h1>Yo soy el contenido</h1> </div> <! Capa de fondo --> <div class=banner-bg></div> </div> </div> <style> .main{ ancho: 100% } .banner{ ancho: 100% posición; .banner-bg{ ancho: 100%;/*El ancho llena la pantalla*/ padding-top: 52.734%;/*La altura de la imagen se divide por el ancho para obtener este valor*/ fondo: url(test.jpg)center center no-repeat;/*Los dos centros están alineados horizontal y verticalmente respectivamente*/ background-size: 100%;/*El fondo está extendido horizontalmente*/ filter:blur(10px); Valor de desenfoque, cuanto mayor es, más borroso es*/ } .banner-contain{ position: absoluta;/*Establece el posicionamiento absoluto de la capa de contenido*/ width: 100% text-align: center; : 6;/*Llevar el contenido a la cima*/ margin-top: 6%; </style></body></html> 1. Implementación adaptativa:Establezca el relleno superior de la etiqueta div en un porcentaje. Los valores de porcentaje de margen y relleno se calculan en función del ancho en lugar del alto de la pantalla, por lo que puede configurar un área adaptativa en consecuencia. sigue
Entonces la relación alto-ancho es: 540/1024, que es aproximadamente 52,734%, es decir, la altura es el 52,734% del ancho. Aquí el ancho se establece en 100%, luego padding-top del ancho es. 52,734%*100%
Configure dos capas, una es la capa de desenfoque de fondo, admite de forma adaptativa todo el contenedor div externo, establece el valor de desenfoque a través filter:blur() , la otra es la capa de contenido, posicionamiento absoluto, establece el índice z para aumentar el capa de contenido Se evita que las capas se bloqueen para que la capa de contenido no se vea afectada por el desenfoque
Lo anterior es el código de ejemplo que el editor le presenta en la interfaz para lograr un fondo borroso pero con contenido claro y adaptable. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje a mí y al editor. Le responderemos a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!
Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!