Vamos falar sobre o básico sem ser muito detalhado. Às vezes, o front-end encontrará a necessidade de desfocar o fundo, mas exigirá um conteúdo claro primeiro.
A seguir está a implementação específica:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Desfoque de fundo</title></head><body> <div class=main><!-- O seguinte O fundo está desfocado e o restante do conteúdo está claro--><!-- Camada de conteúdo--> <div class=banner> <div class=banner-contain> <h1>Eu sou o conteúdo</h1> </div> <--- Camada de fundo --> <div class=banner-bg></div> </div> </div> <style> .main{ largura: 100% } .banner{ largura: 100% posição: relativa }; .banner-bg{ width: 100%;/*A largura preenche a tela*/ padding-top: 52.734%;/*A altura da imagem é dividida pela largura para obter este valor*/ background: url(test.jpg)center center no-repeat;/*Os dois centros estão alinhados horizontal e verticalmente*/ background-size: 100%;/*O fundo está espalhado horizontalmente*/ filter:blur(10px); Valor do desfoque, quanto maior, mais desfocado fica*/ } .banner-contain{ position: absoluto;/*Define o posicionamento absoluto da camada de conteúdo*/ width: 100% text-align: z-index; : 6;/*Trazer conteúdo para o topo*/ margin-top: 6% } </style></body></html> 1. Implementação adaptativa:Defina o padding-top da tag div como uma porcentagem. Os valores de preenchimento e porcentagem de margem são calculados com base na largura e não na altura da tela, para que você possa definir uma área adaptável de acordo. segue
Então a proporção entre altura e largura é: 540/1024, que é cerca de 52,734%, ou seja, a altura é 52,734% da largura. Aqui a largura é definida como 100%, então padding-top da largura é. 52,734%*100%
Configure duas camadas, uma é a camada de desfoque de fundo, suporta adaptativamente todo o contêiner div externo, define o valor de desfoque por meio filter:blur() , a outra é a camada de conteúdo, posicionamento absoluto, defina o índice z para aumentar o camada de conteúdo As camadas são impedidas de serem bloqueadas para que a camada de conteúdo não seja afetada pelo desfoque
O código acima é o código de exemplo que o editor apresenta a você no front end para obter o desfoque de fundo, mas com conteúdo claro e adaptável. Espero que seja útil para você. Se você tiver alguma dúvida, deixe uma mensagem para mim e para o editor. responderá a você a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!
Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!