CSS 灰度图像无法 header 成为不同的颜色

Question

我在设置图像顶部的 header h2 颜色时遇到问题，我将其设置为灰度。我希望它是橙色的，但是因为我添加了灰度，所以它覆盖了我的 css 以使 h2 文本变成灰色。

我的 html 代码如下：

<div id="thumbnails" class="pt-page  pt-page-current">
            <div class="scalediv">
                <div class="row no-gutter" data-id="one">
                    @for (var i = 0; i < Model.Count; i++)
                    {
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">                            
                                <figure class="callpost" data-num="@Model.Article[i].DataNumber" style="background-image: url('@String.Format("data:image/png;base64,{0}", Convert.ToBase64String(@Model.Article[i].Picture.Image))');" data-property="border-width" data-from="0" data-to="35px">
                                    <div class="content">
                                        <div class="content-wraper">                                            
                                            <h2>@Model.Article[i].Title</h2>                                                                                                                                       
                                            <div class="excerpt">@Model.Article[i].IntroText</div>
                                            <div class="postinfo"> ARTICLES <span>@Convert.ToDateTime(Model.Article[i].DateCreated).ToString("dd/MM/yyyy")</span> </div>
                                        </div>
                                    </div>
                                </figure>                            
                        </div>
                    }                    
                    <div class="clear"></div>
                </div>
            </div>

这是我的 CSS 灰度：

#thumbnails figure {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;      
}
#thumbnails figure:hover {
    -webkit-filter: grayscale(0);
    filter: none !important;    
}

我试过像这样添加到 css：

#thumbnails figure h2{
    color: #DD2C00 !important;
}

这是我的 CSS header:

figure .content  h2 {            
    color: #DD2C00;
    font-family: FuturaBT-Medium;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 47px;
    margin-bottom: 20px;                       
}

与其他尝试一起尝试更改 h2 的 CSS 但我无法让 header 在图像为灰度时显示为橙色。

如有任何想法或建议，我们将不胜感激。

Answer 1

您的代码不起作用，因为过滤器是在 DOM 渲染之后计算的。因此，!important 不会有任何效果。

要禁用对h2的滤镜效果，需要将其调出。您可以用不同的方式直观地将 h2 放在图形上，例如负边距。

示例：https://jsfiddle.net/j9fbc0sw/3/

对不起我的英语）

CSS 灰度图像无法 header 成为不同的颜色

CSS Grayscale image cannot get header to be a different colour

html

css

header

grayscale