我有一个非常奇怪的情况，我有将灰度应用于整个 HTML 文档的样式。没关系，但现在我的图像显然有我不想要的灰度过滤器。想要实现的是图像没有灰度过滤器，但整个 HTML 需要保持原样。<!DOCTYPE html><html 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>这里还有 jsfiddle 链接：https ://jsfiddle.net/y2xamkwe/我可以用 Javascript 或 CSS 来做吗？我的 CSS 是这样的html .img-fluid { filter:none!important}
3 回答
神不在的星期二
TA贡献1963条经验 获得超6个赞
当使用以下代码将样式应用于 body 元素中除exclude类之外的所有项目时，将为您解决此问题。
<style>
body :not(.exclude) {
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
filter: grayscale(1);
</style>
然后你可以像这样向你的图像标签添加一个额外的类：
<img class="img-fluid exclude" src="https://blackrockdigital.github.io/startbootstrap-agency/img/portfolio/01-thumbnail.jpg"/>
我希望这有助于解决您的问题。
HUH函数
TA贡献1836条经验 获得超4个赞
您可以使用该class属性来执行此操作。为了理解它是如何工作的，这里有一个例子。您将需要 CSS 来执行此操作：
<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>
希望这有帮助！
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
一种方法可能是（除了不使用 !important 无处不在，这不是一个好习惯）是列出你想要灰度化的所有元素，或者通过使用一个 CSS 来定位你的所有元素需要变灰，或者创建一个 CSS 类包含此过滤器选项。当您在 HTML 和 BODY 上应用过滤器时，您不能使相关图像不被过滤，因为它们包含在上述标签中，这意味着它们也会被过滤。
添加回答
举报
0/150
提交
取消