使用不透明度和过渡动画混合模式

时间:2017-08-04 09:07:25

标签: css mix-blend-mode background-blend-mode

我正在寻找一种方法来改变background-color-blend-mode的不透明度 Photoshop中。我的目标是为混合模式的不透明度设置动画,使其消失。有什么想法吗?



#img-esadvalence {
  background-image: url(http://leodurand.fr/works/planesad/esad1.jpg);
  background-color: #e12a1c;
  background-blend-mode: screen;
}

.all-img-menu {
    background-size: contain;
    background-position: center; 
    width: 110%;
    padding-bottom: 40.75vh;
    display: block;
    top: 50%;
    -ms-transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%); 
    transform: translate(0%,-50%);
    position: absolute;
    transition: all 0.6s ease;
}

<div id="img-esadvalence" class="all-img-menu"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:4)

混合模式仅在有2个背景时才有效。要逐渐取消混合模式,您可以设置(转换)透明背景颜色。

演示(将鼠标悬停在图片上以查看效果):

&#13;
&#13;
H
&#13;
osmnx.plot_graph(H)
&#13;
&#13;
&#13;