html - CSS 过滤器混淆

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 的 div 但它得到了我更糊涂了。

Answer 1

你的<span>嵌套在具有过滤器样式的 div 中。将其取出，将不会应用样式。