Tengo el siguiente código
div{
display: grid;
place-content: center;
font-family: sans-serif;
min-height: 100vh;
padding-inline: 2rem;
background-image: url(https://picsum.photos/1400/500);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
position: relative;
}
h1{
color: #fff;
text-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique error eveniet obcaecati rerum hic assumenda ipsum aperiam nemo, consequatur perferendis totam dolor repellendus autem non magnam veniam repudiandae facilis! Quisquam?</h1>
</div>
</body>
</html>
Pero no encuentro la forma de añadirle ahora un color por encima como para poner el color que yo quiera. Intente usar un ::before absolute para poner un color con opacidad pero el elemento ::before tambien termina en escala de grises.
La idea es usar un backgound sin importar la imagen y que yo pueda cambiarle el color a una escala de Azules, rojos, verdes, etc.
Seria excelente una manito con eso porque recuerdo haber visto en una ocasion esa funcion, pero no pude encontrar en mi historial ese video.