使用Javascript或CSS将某些样式应用于特定元素_Javascript_Jquery_Html_Css

使用Javascript或CSS将某些样式应用于特定元素

javascript jquery html css

使用Javascript或CSS将某些样式应用于特定元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个非常奇怪的情况，我的样式将灰度应用于整个HTML文档。这没关系，但现在我的图像明显有灰度过滤器，这是我不想要的。我试图实现的是，图像没有灰度过滤器，但整个HTML需要保持原样 <!DOCTYPE html> <html lang="en" style="background-color:#000!important;;;;color:#fff!important;border-color:#fff!important;opacity:1!important;;;;-w

我有一个非常奇怪的情况，我的样式将灰度应用于整个HTML文档。这没关系，但现在我的图像明显有灰度过滤器，这是我不想要的。我试图实现的是，图像没有灰度过滤器，但整个HTML需要保持原样

<!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>

可以使用

class

属性执行此操作。为了了解它是如何工作的，这里有一个例子。您将需要CSS来执行此操作：


h1.不重要{
颜色：蓝色；
}
p、 重要的{
颜色：绿色；
}
标题1
只是一个普通的段落
这一段更为重要

希望这有帮助

一种方法可能是（除了不使用！在任何地方都很重要，这不是一种好的做法）列出所有要灰度化的元素，或者使用CSS将所有需要的元素都灰显，或者创建一个包含此筛选选项的CSS类。

当您在HTML和正文上应用过滤器时，您不能使相关图像不被过滤，因为它们包含在前面提到的标记中，这意味着它们也将被过滤。

我建议您删除所有内联样式，尤其是在

HTML

标记上。相反，您可以使用

：after

和

：before

来提高效率。下面是一个您可能想要做的示例

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;

}

当使用以下代码将样式应用于body元素中的所有项目时，除了

排除

类，将为您解决此问题

<style>
    body :not(.exclude) {
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -ms-filter: grayscale(1);
        filter: grayscale(1);
</style>


正文：非（.exclude）{
-webkit过滤器：灰度（1）；
-moz滤波器：灰度（1）；
-ms过滤器：灰度（1）；
过滤器：灰度（1）；

然后，您可以向图像标记添加一个额外的类，如下所示：

<img class="img-fluid exclude" src="https://blackrockdigital.github.io/startbootstrap-agency/img/portfolio/01-thumbnail.jpg"/>

我希望这有助于解决您的问题。

为什么标签上有内联样式？删除它。图像将扮演什么角色？有没有办法将它们从主内容替换到外部块并赋予它们绝对位置？在这种情况下，您可以对主内容块内的所有内容进行灰度化，而不会影响图像。。。

<img class="img-fluid exclude" src="https://blackrockdigital.github.io/startbootstrap-agency/img/portfolio/01-thumbnail.jpg"/>