Verificação HTML: CSS: "background-blend-mode": X não é um valor "background-blend-mode".

Sobre este problema HTML

A propriedade background-blend-mode controla como as camadas de fundo de um elemento — incluindo imagens de fundo e cores de fundo — se misturam entre si. Cada valor deve ser uma palavra-chave de modo de mistura válida conforme definido na especificação CSS Compositing and Blending. O validador W3C sinaliza este erro quando encontra um valor que não corresponde a nenhuma palavra-chave reconhecida, o que pode acontecer devido a erros de digitação, valores inventados, ou confusão com propriedades similares como mix-blend-mode.

Embora os navegadores tipicamente ignorem valores CSS não reconhecidos e voltem ao padrão (normal), confiar neste comportamento é arriscado. Significa que o efeito de mistura que você pretendia simplesmente não aparecerá, e a falha silenciosa pode ser difícil de debugar. Corrigir erros de validação garante que os seus estilos funcionem como pretendido em todos os navegadores.

A lista completa de valores válidos para background-blend-mode é:

normal (padrão)
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

Você também pode especificar múltiplos valores separados por vírgula quando um elemento tem múltiplas camadas de fundo. Cada valor corresponde a uma camada de fundo na mesma ordem.

Exemplos

Valores inválidos

Estes exemplos irão desencadear o erro de validação:

/* Erro de digitação: "multipley" não é uma palavra-chave válida */
.hero {
  background-blend-mode: multipley;
}

/* "blend" não é um valor reconhecido */
.banner {
  background-blend-mode: blend;
}

/* Valores numéricos não são aceites */
.card {
  background-blend-mode: 50%;
}

Valores corrigidos

/* Corrigido: ortografia correcta */
.hero {
  background-blend-mode: multiply;
}

/* Corrigido: usar uma palavra-chave de modo de mistura válida */
.banner {
  background-blend-mode: overlay;
}

/* Corrigido: usar uma palavra-chave em vez de um valor numérico */
.card {
  background-blend-mode: soft-light;
}

Múltiplas camadas de fundo

Quando você tem múltiplas imagens de fundo, forneça uma lista separada por vírgulas de modos de mistura válidos:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Background Blend Mode Example</title>
  <style>
    .blended {
      width: 300px;
      height: 200px;
      background-color: teal;
      background-image: url("pattern.png"), url("photo.jpg");
      background-blend-mode: screen, multiply;
    }
  </style>
</head>
<body>
  <div class="blended">Blended background layers</div>
</body>
</html>

Neste exemplo, screen aplica-se à primeira camada de imagem de fundo e multiply aplica-se à segunda. Ambas são palavras-chave válidas, portanto nenhum erro de validação é produzido.