如何清除 CSS 中父元素放置的过滤器?
How do I clear a filter placed by a parent element in CSS?
我有一张带有背景图片的 <div>
,我希望背景图片应用滤镜。但我也希望 div 包含覆盖图像的 <p>
标记——我不希望 <p>
具有相同的过滤器。
如何清除<p>
中<div>
设置的过滤器?
到目前为止我得到了什么:
<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;
}
这个答案似乎可行,但我希望有更好的方法。
您将无法重置子元素的筛选器,但您可以将两者封装在一个容器中 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>
我有一张带有背景图片的 <div>
,我希望背景图片应用滤镜。但我也希望 div 包含覆盖图像的 <p>
标记——我不希望 <p>
具有相同的过滤器。
如何清除<p>
中<div>
设置的过滤器?
到目前为止我得到了什么:
<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;
}
这个答案似乎可行,但我希望有更好的方法。
您将无法重置子元素的筛选器,但您可以将两者封装在一个容器中 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>