如何清除CSS中父元素放置的過濾器？

Question

我有一個<div>與背景圖像，我想要背景圖像應用過濾器。但我也希望div包含覆蓋圖像的<p>標籤 - 而我不希望<p>擁有相同的過濾器。

如何清除由<div>在<p>中設置的過濾器？

到目前爲止，我已經得到了什麼：

<div className="artistDetailImage" style={{backgroundImage: url(${this.props.artistImage})`}}> 
    <p className="artistDetailText">{name}</p> 
</div> 

.artistDetailImage { 
    background-size: cover; 
    background-position: top; 
    width: 100%; 
    height: 300px; 
    filter: contrast(60%); 
} 

.artistDetailText { 
    width: 100%; 
    font-size: 20px; 
    text-align: left; 
    padding-left: 5px; 
    position: relative; 
    top: 240px; 
    filter: none; //Have also tried contrast(100%), brightness(1), etc. 
    color: white; 
} 

這個答案似乎是工作，但我希望有一個更好的辦法做到這一點。 https://stackoverflow.com/a/32677739/3010955

Answer 1

您將無法重置子元素的過濾器，但可以將兩者都包裝在容器div中，然後相應地放置<p>。

.container-div { 
 
    position: relative; 
 
} 
 

 
.artistDetailImage { 
 
    background-size: cover; 
 
    background-position: top; 
 
    width: 100%; 
 
    height: 300px; 
 
    filter: contrast(60%); 
 
} 
 

 
.artistDetailText { 
 
    width: 100%; 
 
    font-size: 20px; 
 
    text-align: left; 
 
    padding-left: 5px; 
 
    position: absolute; 
 
    top: 240px; 
 
    color: white; 
 
}

<div class="container-div"> 
 
    <div class="artistDetailImage" style="background-image: url('http://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg');"> 
 
    </div> 
 
    <p class="artistDetailText">NAME</p> 
 
</div>