在 div 上应用灰度，除了它的子元素之一[重复]

【问题标题】：Apply grayscale on div except one of it's child element [duplicate]在 div 上应用灰度，除了它的子元素之一[重复]
【发布时间】：2018-09-08 05:53:45
【问题描述】：

我想要的是排除部分应该以黄色显示。

    body :not(.exclude) {
    	-webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
    	filter: grayscale(100%);
    }
    
    .exclude {
    	background: yellow;
    	height: 100px;
    }
    
    .gray {
    	background: purple;
    	height: 300px;
    }

    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <div class="gray">
        <div class="exclude"></div>    
      </div>
    </body>
    </html>

我试过了，但没有显示为黄色

【问题讨论】：

标签： html css

【解决方案1】：

应用过滤器时，无法忽略子元素。替代解决方案是。

.gray{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:purple;
  filter: grayscale(100%);
  z-index:-1;
}
.exclude{
  background-color:yellow;
  width:inherit;
  height:30px;
  top:10px;
  position:absolute;
  
}

<div id="parent_div" style="position:relative;height:100px;width:100px;">
  <div class="gray" ></div>
  <div class="exclude"></div>
</div>

希望它有效。

【讨论】：