Question

我要排除的部分应该显示为黄色。

    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>

我尝试过，但是它没有显示为黄色

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

希望它能起作用。

在div上应用灰度，但其子元素之一除外

1 个答案: