Página Inicial>Tutorial de web design>Tutorial CSS

CSS usa filtro e filtro de fundo para obter efeito de desfoque gaussiano (código de exemplo)

Autor：Eve Cole Data da Última Atualização：2024-12-20 16:54:18

fundo

Recebi hoje uma solicitação para usar o efeito de desfoque gaussiano para desfocar uma página. Aproveitei a oportunidade para resolver as duas APIs de desfoque gaussiano em CSS3.

Introdução à API

filtro

ilustrar:
Esta API é um filtro que pode não apenas obter desfoque gaussiano, mas também muitas outras coisas, como deslocamento de cor, saturação, escala de cinza, etc.

gramática:

 // Use espaços para separar vários filtros filter: none;
//Filtro de desfoque gaussiano: blur(4px);
//Filtro de brilho linear: brilho();
// Filtro de contraste: contraste();
// Filtro de efeito de sombra: drop-shadow();
//Filtro de tons de cinza: tons de cinza();
// Filtro de rotação de matiz: hue-rotate();
//Inverter filtro de imagem: invert();
//Converter filtro de transparência: opacity();
// Filtro de saturação: saturate();
// filtro marrom: sepia();
// filtro SVG filtro: url();

Entre eles filter: blur();

filtro de pano de fundo

ilustrar:
Quando você cria um elemento e adiciona este atributo, ele adiciona efeitos (como desfoque ou mudança de cor) à área atrás do elemento.

contraste:
O atributo filter deve ser carregado na imagem ou imagem de fundo, enquanto o filtro de fundo só precisa ser um elemento.

gramática:

 filtro de pano de fundo: desfoque (2px);
filtro de fundo: brilho (60%);
filtro de fundo: contraste (40%);
filtro de pano de fundo: sombra projetada (4px 4px 10px azul);
filtro de fundo: escala de cinza (30%);
filtro de fundo: rotação de matiz (120 graus);
filtro de fundo: inverter (70%);
filtro de fundo: opacidade (20%);
filtro de fundo: sépia (90%);
filtro de fundo: saturar (80%);

Exemplo

filtro exemplo um

 <!DOCTYPEhtml>
<html lang="pt">
  <cabeça>
    <estilo>
      .wrapBox2 {
        largura: 800px;
        altura: 300px;
        estouro: oculto;
        posição: relativa;
        imagem de fundo: url("./win.jpeg");
        tamanho de fundo: 100% 100%;
        repetição em segundo plano: sem repetição;
        filtro: desfoque (10px);
      }
      .subBox {
        posição: absoluta;
        largura: calc(100% - 100px);
        altura: calc(100% - 100px);
        índice z: 2;
      }
      .texto {
        posição: relativa;
        /* índice z: 10;
        tamanho da fonte: 40px;
        peso da fonte: negrito;
        cor: #f00;
      }
    </estilo>
  </head>
  <corpo>
    <div class="wrapBox2">
      <div class="subBox"></div>
      <div class="text">Desfocar tudo</div>
    </div>
  </body>
</html>

Uma coisa a notar aqui é que depois de adicionar o desfoque, o tamanho real excederá a largura e a altura que definimos por causa do efeito de rebarba circundante. Você pode envolver uma camada externa e definir overflow: hidden;

exemplo de filtro dois

 <!DOCTYPEhtml>
<html lang="pt">
  <cabeça>
    <estilo>
      .wrapBox2 {
        largura: 800px;
        altura: 300px;
        /* estouro: oculto */
        posição: relativa;
      }
      .subBox {
        largura: 100%;
        altura: 100%;
        posição: absoluta;
        largura: calc(100% - 100px);
        altura: calc(100% - 100px);
        índice z: 2;
        filtro: desfoque (10px);
      }
      .texto {
        posição: relativa;
        /* índice z: 10;
        tamanho da fonte: 40px;
        peso da fonte: negrito;
        cor: #f00;
      }
    </estilo>
  </head>
  <corpo>
    <div class="wrapBox2">
      <img src="./win.jpeg" class="subBox" />
      <div class="text">Desfocar tudo</div>
    </div>
  </body>
</html>

Desta forma, como o texto e a imagem estão no mesmo nível, o texto fica abaixo ou acima da imagem (controlado de acordo com o índice z) sem desfocar o texto.

exemplo de filtro de pano de fundo 1

 <!DOCTYPEhtml>
<html lang="pt">
  <cabeça>
    <estilo>
      .wrapBox2 {
        largura: 800px;
        altura: 300px;
        estouro: oculto;
        posição: relativa;
        imagem de fundo: url("./win.jpeg");
        tamanho de fundo: 100% 100%;
        repetição em segundo plano: sem repetição;
      }
      .subBox {
        posição: absoluta;
        largura: calc(100% - 100px);
        altura: calc(100% - 100px);
        índice z: 2;
        filtro de pano de fundo: desfoque (10px);
        /* topo: 100px */
      }
      .texto {
        posição: relativa;
        /* índice z: 10;
        tamanho da fonte: 40px;
        peso da fonte: negrito;
        cor: #f00;
      }
    </estilo>
  </head>
  <corpo>
    <div class="wrapBox2">
      <div class="subBox"></div>
      <div class="text">Parcialmente desfocado</div>
    </div>
  </body>
</html>

Como você pode ver, o atributo background-filter não precisa ser definido em um elemento de imagem, mas em qualquer elemento, acho que esse método é mais flexível.

Resumir

Se quiser apenas desfocar uma imagem, você pode usar o filtro diretamente. Se você quiser cobrir uma determinada parte da página/imagem HTML com uma camada de desfoque, use o filtro de fundo.

Claro, usar o filtro de pano de fundo também pode satisfazer o primeiro cenário.

Isso conclui este artigo sobre CSS usando filtro e filtro de fundo para obter o efeito de desfoque gaussiano (código de exemplo). Para obter mais conteúdo relacionado ao desfoque gaussiano de CSS, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo, espero. você apoiará mais o downcodes.com no futuro!

Artigos Relacionados