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

Question

我正在寻找一种类似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>

- Léo Durand

---

你的意思是想要将图像动画化消失（以便最终看到红色背景）吗？还是想要将混合模式缓慢过渡回“正常”状态？ - Terry

Answer 1

混合模式仅在存在两个背景时起作用。要逐渐取消混合模式，您可以将过渡动画设置为透明的背景颜色。

演示（将鼠标悬停在图像上以查看效果）：

#img-esadvalence {
  background-image: url(https://placeimg.com/640/480/animals);
  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 Drori