[英]CSS Grayscale image cannot get header to be a different colour
我在設置要設置為灰度的圖像上方的標題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標頭:
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,但是當圖像為灰度級時,我無法使標題顯示為橙色。
任何想法或指針將不勝感激。
您的代碼不起作用,因為過濾器是在DOM渲染之后計算的。 因此, !important
將無效。
要將濾鏡效果禁用為h2,需要將其顯示出來。 您可以用不同的方式直觀地將h2放在圖形上,例如負邊距。
示例: https : //jsfiddle.net/j9fbc0sw/3/
對不起我的英語不好)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.