具有不透明度和转换的动画混合模式

问题描述：

我正在寻找一种方法来更改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>

你的意思是你要动画图像远（这样你到底看到一个红色的背景）？或者你是否想要将混合模式补回到“正常”？ – Terry

答

混合模式，只有当有2个背景的作品。要逐渐取消混合模式，可以将（转换）动画效果设置为透明背景色。

演示（悬停在图片查看效果）：

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

 

 
#img-esadvalence:hover { 
 
    background-color: transparent; 
 
} 
 

 

 

 
.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>

这很聪明！非常感谢Ori！ –

不客气。我编辑了答案 - 查看更改。 –

具有不透明度和转换的动画混合模式

相关推荐