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に影響します。私はdiffを適用しようとしました同じz-index esには、それでも同じですが、私はまた、divの:afterに影響を与えるフィルターを作ってみましたが、それは私がもっと混乱してしまった。

Answer 1

<span>は、フィルタスタイリングを持つdiv内にネストされています。それを取り出すと、スタイリングは適用されません。