Question

所以我一直试图解决这个问题2个小时，我经常尝试搜索但没有找到任何东西，如果有人帮助我，我会很感激。我有这个问题，我给div的背景一个过滤器，为我做的css文件有：

#carousel {
  width: 1366px;
  height: 512px;
}

#carousel-next>div {
  position: absolute;
  right: 208px;
  z-index: 1;
  width: 208px;
  height: 80px;
  border-radius: 5px 0 0 5px;
  filter: brightness(125%); /* Current draft standard */
  -webkit-filter:brightness(125%); /* New WebKit */
  -moz-filter: brightness(125%);
  -ms-filter: brightness(125%); 
  -o-filter: brightness(125%); /* Not yet supported in Gecko, Opera or IE */ 
}

#carousel-next>div:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(240,132,24,.75);
  border-radius: 5px 0 0 5px;
  z-index: -1;
}

#carousel-prev>div {
  position: absolute;
  z-index: 1;
  width: 208px;
  height: 80px;
  border-radius: 0 5px 5px 0;
  filter: grayscale(100%) brightness(25%); /* Current draft standard */
  -webkit-filter: grayscale(100%) brightness(25%); /* New WebKit */
  -moz-filter: grayscale(100%) brightness(25%);
  -ms-filter: grayscale(100%) brightness(25%); 
  -o-filter: grayscale(100%) brightness(25%); /* Not yet supported in Gecko, Opera or IE */ 
  filter: url(resources.svg#desaturate) brightness(25%); /* Gecko */
  filter: gray brightness(25%); /* IE */
-webkit-filter: grayscale(1) brightness(25%); /* Old WebKit */
}

#carousel-next, #carousel-prev {
  color: white;
  position: absolute;
  top: 458px;
  right: 81px;
}

我的html文件是：

<div id="carousel" style="background: url('images/kill.jpg');">
<a href="#" id="carousel-next">
    <div style="background:url('images/next.jpg');"><span>next</span></div>
</a>
<a href="#" id="carousel-prev">
    <div style="background:url('images/previous.jpg');"><span>previous/span></div>
</a>

我有点困惑，但我会试着解释一下：我添加到div以影响背景的过滤器也会影响我不想要的span，我尝试将不同的z-index es应用于span但它仍然是相同的，我也尝试使过滤器影响:after的{{1}}，但它让我更加困惑。

Answer 1

您的<span>嵌套在具有过滤器样式的div中。拿出来，不会应用造型。

CSS过滤器混淆

1 个答案: