CODEWITHSUNDEEP
css
Fahrenheit
Fahrenheit

Reputation: 73

Is it possible to convert the whole page in grayscale except img?

I tried but it doesn't work:

body {
    -webkit-filter: grayscale(100%);
}
img {
    -webkit-filter: none !important;
}

Upvotes: 6

Views: 1102

Answers (2)

Paulie_D
Paulie_D

Reputation: 115109

As mentioned in the other answer, apply greyscale to all element except images.

body *:not(img) {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
h1 {
  color: red;
}
img {
  float: left;
}
p {
  color: green;
}
<h1>Phil is Awesome</h1>
<img src="http://www.fillmurray.com/200/300" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, corrupti culpa suscipit, saepe voluptas eius.</p>

Upvotes: 2

Gibbs
Gibbs

Reputation: 22964

Filter works in this way: First it will render all the elements and it applies filters from parent.

Since you set grayscale to body. It will not re-apply to your img.

Solution:

Instead of applying to body, apply to all the divs required and leave the img.

Upvotes: 0

Related Questions