Decoloración en CSS a través del modo de mezcla

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Decoloración en CSS a través del modo de mezcla</title>
</head>
<body>

.photo::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  
  background-image: var(--source);
  background-repeat: no-repeat;
  background-size: 100%;
  
  filter: grayscale(1) contrast(1.2);
  z-index: 0;
  mix-blend-mode: lighten;
  background-blend-mode: hard-light;
  background-color: #c2c2c2;
}
</style>

<h1 align="center" style="color:black; font-family: Monaco, 'Courier New', monospace; size:12px; text-transform:capitalize; text-decoration: none;">Decoloración en CSS a través del modo de mezcla</h1>
<div class="photo"></div>

</body>
</html>