Parlons des bases sans devenir trop verbeux. Parfois, le front-end sera confronté au besoin de flouter l'arrière-plan mais nécessitera un contenu clair. Jetons d'abord un coup d'œil à l'effet :
Voici la mise en œuvre spécifique :
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Flou d'arrière-plan</title></head><body> <div class=main><!-- Ce qui suit L'arrière-plan est flou et les autres contenus sont clairs--><!-- Couche de contenu--> <div class=banner> <div class=banner-contain> <h1>Je suis le contenu</h1> </div> <! Couche d'arrière-plan --> <div class=banner-bg></div> </div> </div> <style> .main{ width: 100% } .banner{ width: 100%; .banner-bg{ width : 100%;/*La largeur remplit l'écran*/ padding-top : 52,734%;/*La hauteur de l'image est divisée par la largeur pour obtenir cette valeur*/ background : url(test.jpg)center center no-repeat;/*Les deux centres sont respectivement alignés horizontalement et verticalement*/ background-size: 100%;/*L'arrière-plan est réparti horizontalement*/ filter:blur(10px); Valeur de flou, plus elle est grande, plus elle est floue*/ } .banner-contain{ position: absolue;/*Définir le positionnement absolu du calque de contenu*/ width: 100%; : 6;/*Amener le contenu en haut*/ margin-top: 6% } </style></body></html> 1. Mise en œuvre adaptative :Définissez le remplissage supérieur de la balise div sur un pourcentage. Les valeurs de pourcentage de remplissage et de marge sont calculées en fonction de la largeur plutôt que de la hauteur de l'écran, vous pouvez donc définir une zone adaptative en conséquence. suit
Ensuite, le rapport hauteur/largeur est : 540/1024, soit environ 52,734 %, c'est-à-dire que la hauteur est de 52,734 % de la largeur. Ici, la largeur est définie sur 100 %, puis padding-top de la largeur est. 52,734%*100%
Configurez deux calques, l'un est le calque de flou d'arrière-plan, prend en charge de manière adaptative l'ensemble du conteneur div externe, définit la valeur de flou via filter:blur() , l'autre est le calque de contenu, le positionnement absolu, définissez l'index z pour augmenter le couche de contenu Les calques ne peuvent pas être bloqués afin que la couche de contenu ne soit pas affectée par le flou
Ce qui précède est l'exemple de code que l'éditeur vous présente sur le front-end pour obtenir un flou d'arrière-plan mais avec un contenu clair et adaptatif. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message ainsi qu'à l'éditeur. vous répondrons à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !
Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !