具有不透明度和轉換的動畫混合模式

我正在尋找一種方法來更改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>

來源

2017-08-04 Léo Durand

你的意思是你要動畫圖像遠（這樣你到底看到一個紅色的背景）？或者你是否想要將混合模式補回到「正常」？ – 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>

來源

2017-08-04 09:12:52

這很聰明！非常感謝Ori！ –

不客氣。我編輯了答案 - 查看更改。 –

具有不透明度和轉換的動畫混合模式

回答

相關問題