在Chrome中混合混合模式的問題

我一直在嘗試在包含css不透明度轉換的實例的頁面上使用混合混合模式。看起來發生的情況是，包含混合混合模式的div在過渡期間顯示爲沒有混合模式，或者更確切地說，當動畫正在進行時。我只在Chrome中發現它是一個問題。在Chrome中混合混合模式的問題

在我的示例中，雖然div正在將混合模式顯示正確地轉換爲圖像，但不會覆蓋頁面背景。一旦轉換完成，它就會返回到顯示狀態。換句話說，當動畫正在進行時，混合的div在黑色背景上顯示爲純黃色，但由於它被設置爲變暗，因此它應該在黑色背景下隱藏。一旦動畫完成，它應該會出現。它在圖像上看起來很正常。

我試過這是Firefox和Safari，似乎沒有問題。

筆：http://codepen.io/anon/pen/QGGVOX

編輯 - 我發現了另一個實例，其中發生這種情況，不涉及任何動畫。奇怪的是，當一個div的位置設置爲固定而另一個是絕對位置時，會發生這種情況，請參閱：如果div .image的位置更改爲絕對，則混合模式顯示爲正常。

body { 
background: #000; 
} 

.blend { 
    height: 650px; 
    width: 50%; 
    background-color: yellow; 
    mix-blend-mode: darken; 
    position: absolute; 
    opacity: 1; 
    left: 0; 
    top: 0px; 
    z-index: 100; 
} 

img { 
    position: relative; 
    z-index: 0; 
}

來源

2016-11-17 Henry

我有完全相同的問題，並失去了我的想法。如果您在過去的一個月內找到了解決方法，請發帖！ – chrscblls

所以，我想我想出了這個問題。在動畫過程中，身體似乎不算作一個元素，因此使得黃色出現在1個不透明的位置。我使用其他混合模式進行測試，並且它總是呈現黃色。（當設置爲'差異預期的結果將是白色而不是黃色的）

那麼修復？只需添加一個100％大小和黑色背景的div！然後，黃色有東西可以混合，並沒有出現。

下面是在你的筆工作的代碼：

HTML - 增加了BG格：

<div class="bg"></div> 
<div class="blend"></div> 
<img src="http://lorempixel.com/500/500/">

它的CSS：

.bg{ 
    background: #000; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 
body { 
    background: #000; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
}

我也改變了身體，以填補窗口所以邊距也不是黃色。或者，可以根據身體的功能調整混合div的大小。

標記@chrscblls，因爲他們想知道你是否發現任何東西。

編輯：

對於其他codepen的問題是不一樣的壽。他們試圖將圖像和黃色矩形變暗成灰色背景。

如果他們不希望黃色顯示在他們的灰色背景上，解決方案只是將圖像放入div中並使用:: after混合顏色。或者甚至只是製作一個空白的div，將它作爲背景並使用:: after。

此：

<div/>

與：

body { 
    background: #333; 
} 

div{ 
    position:fixed; 
    width: 500px; 
    height: 500px; 
    top:50px; 
    left: 50px; 
    mix-blend-mode: darken; 
    background-image: url("http://lorempixel.com/500/500/"); 
} 
div::after { 
    content: ""; 
    height: 100%; 
    width: 100%; 
    background-color: yellow; 
    mix-blend-mode: darken; 
    position:absolute; 
    opacity: 1; 
    left: 0; 
    top: 0; 
}

或該：

<div><img src="http://lorempixel.com/500/500/"></div>

而不在div的CSS的 '背景圖像'。

來源

2017-03-25 23:30:52 Salix

在Chrome中混合混合模式的問題

回答

相關問題