所以我有一个以图像为背景的div。当我悬停时,我希望出现黑色渐变,因此,如果将白色图像用作背景,您仍然可以看到文本。
示例(Chrome,Opera,Firefox):
现在,这一切都可以在Chrome,Opera和Firefox上正常运行。但是...在IE和Edge上,没有出现顶部渐变。
示例(IE,Edge):
如您所见,底部图像缺少顶部渐变。
HTML:
<div class="articleContainer">
<a href="{% url 'section_article_detail' article.section.slug article.slug %}">
{% if 'video' in article.get_tags %}
<i class="far fa-play-circle"></i>
{% else %}
<i class="fas fa-align-left"></i>
{% endif %}
<div class="infoBackground"></div>
<div id="cookingInfoContainerSide">
<div class="cookingInfoItemSide">
<img src="{% static 'publicnfx/images/prep-inverted.png' %}" alt="">
<div class="cookingInfoTextSide">
{% if article.recipe.maximum_preparation_time > 60 %}
<p class="timeSide">60+ </p>
<p>mins</p>
{% else %}
<p class="timeSide">{{ article.recipe.maximum_preparation_time }} </p>
<p>mins</p>
{% endif %}
</div>
</div>
<div class="cookingInfoItemSide">
<img src="{% static 'publicnfx/images/cooking-inverted.png' %}" alt="">
<div class="cookingInfoTextSide">
{% if article.recipe.maximum_cooking_time > 90 %}
<p class="timeSide">90+ </p>
<p>mins</p>
{% else %}
<p class="timeSide">{{ article.recipe.maximum_cooking_time }}</p>
<p>mins</p>
{% endif %}
</div>
</div>
<div class="cookingInfoItemSide">
<img src="{% static 'publicnfx/images/serves-inverted.png' %}" alt="">
<div class="cookingInfoTextSide">
<p class="timeSide">{{ article.recipe.maximum_serves }} </p>
<p>people</p>
</div>
</div>
</div>
<img
src="{{ article.get_thumbnails|varkey:'featured' }}"
alt="{{ article.title }}"
onerror="this.src='/static/publicnfx/images/Cranble-Logo.png'"
class="article-image"
>
<p class="articleTitle realTitle">{{ article.title }}</p>
{% if article.subtitle == "" %}
<p class="articleTitle clickbait">{{ article.title }}</p>
{% else %}
<p class="articleTitle clickbait">{{ article.subtitle }}</p>
{% endif %}
<div class="articleDescIE">
<p class="articleDesc">{{ article.description|truncatechars:100 }}</p>
</div>
</a>
</div>
CSS:
.infoBackground {
transition: .3s;
opacity: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
position: absolute;
width: 100.5%;
height: 100px;
right: -1px;
/* top: 0px; */
z-index: 0;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.6) 8%, rgba(0,0,0,0.48) 29%, rgba(0,0,0,0.32) 55%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%,rgba(0,0,0,0.6) 8%,rgba(0,0,0,0.48) 29%,rgba(0,0,0,0.32) 55%,rgba(0,0,0,0.2) 75%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.6) 8%,rgba(0,0,0,0.48) 29%,rgba(0,0,0,0.32) 55%,rgba(0,0,0,0.2) 75%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#555555, endColorstr=#666666);
}
.articleContainer:hover .infoBackground {
opacity: 1;
}