Witam!
Czy wie ktoś jak zastosować właściwość filter: grayscale(70%) dla obrazka które dodanego jako background-image w body?
body {
background-image: url('https://images.pexels.com/photos/160846/french-bulldog-summer-smile-joy-160846.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
background-size: cover;
height: 100vh;
background-repeat: no-repeat;
filter: grayscale(70%);
}
Wówczas inne elementy, które są umieszczone w body mają zaaplikowaną szarość.
Można zamiast background-image, w kodzie HTML zrobić<img> i ostylować odpowiednio, ale wtedy zrobić kolejną warstwę za pomocą <div> i nałożyć ją na obrazek na obrazek z absolutną pozycją co pociąga za sobą dużo pozycjonowania dla kolejnych elementów, które będą pojawiać się w kodzie.
Może jest jakiś prostszy sposób?