Apply some style to specific element with Javascript or CSS
Question
I have a very strange situation where I have style that apply grayscale to the whole HTML document. That's all ok but now my images obvious have grayscale filter which I don't want. What am trying to achieve is that images don't have that grayscale filter but whole HTML needs to stay as it is.
<!DOCTYPE html>
<html lang="en" style="background-color:#000!important;;;;color:#fff!important;border-color:#fff!important;opacity:1!important;;;;-webkit-filter:grayscale(1);-moz-filter:grayscale(1);-ms-filter:grayscale(1);filter:grayscale(1);;">
<head>
</head>
<body tyle="webkit-filter:grayscale(1);" >
<p style="background-color:#000!important;;;;color:#fff!important;border-color:#fff!important;opacity:1!important;;">
This is text
</p>
<img class="img-fluid" src="https://blackrockdigital.github.io/startbootstrap-agency/img/portfolio/01-thumbnail.jpg" >
</body>
</html>
Also here is jsfiddle link: https://jsfiddle.net/y2xamkwe/
Can I do it with Javascript or with CSS?.
My CSS is like this
html .img-fluid {
filter:none!important
}
4 answers
solution1
4 2019-11-27 13:21:35
When using the following code to apply the style to all the items in the body element except the exclude classes will fix this problem for you.
<style>
body :not(.exclude) {
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
filter: grayscale(1);
</style>
Then you can add an extra class to your image tag like so:
<img class="img-fluid exclude" src="https://blackrockdigital.github.io/startbootstrap-agency/img/portfolio/01-thumbnail.jpg"/>
I hope this helps solving your problem.
solution2
1 2019-11-27 13:05:29
You can do this using the class attribute. To understand how it works, here is an example. You will need CSS to do it:
<html>
<head>
<style>
h1.notimportant {
color: blue;
}
p.important {
color: green;
}
</style>
</head>
<body>
<h1 class="notimportant">Header 1</h1>
<p>Just a normal paragraph</p>
<p class="important">This paragraph is more important</p>
</body>
</html>
Hope this helped!
solution3
1 2019-11-27 13:11:25
One approach could be (apart from not using,important everywhere, it is just not good practice) is to list all your element you want to grayscale, either by use a CSS targeting all your element needs be grayed out. or create a CSS class containing this filter option, As you applied the filter on HTML and BODY, you can't make the related images not filtered as they contained by the forementioned tags. meaning they will be filtered as well.
solution4
1 2019-11-27 13:13:53
I would recommend you to remove all the inline style, especially on the html tag. Instead, you can use make use of :after and :before to make it more efficient. Here is an example of what you might want to do.
body:before {
content: '';
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
filter: grayscale(1);
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.