크롬에서 혼합 혼합 모드 문제가 발생했습니다.

Question

저는 CSS 불투명 전환의 인스턴스가 포함 된 페이지에서 혼합 모드를 사용하려고했습니다. 무슨 일이 일어나고있는 지 알 수있는 것은 믹스 - 블렌드 모드를 포함하고있는 div는 트랜지션 중에 또는 애니메이션이 진행되는 동안 블렌드 모드가없는 것처럼 표시된다는 것입니다. Chrome에서 문제 일뿐입니다.

제 예제에서는 div가 이미지를 올바르게 표시하지만 페이지 배경 위에 올바르게 표시하지 않습니다. 화면 전환이 완료되면 화면이 다시 표시됩니다. 즉, 애니메이션이 진행되는 동안 혼합 된 div는 검정색 배경에 단색의 노란색으로 표시되지만 어두워지기 때문에 검정색 배경 위에 보이지 않아야합니다. 애니메이션이 끝나면 애니메이션이 나타납니다. 이미지 위에 정상적으로 나타납니다.

Firefox 및 Safari를 사용해 보았지만 문제가없는 것으로 보입니다.

펜 : http://codepen.io/anon/pen/QGGVOX

편집 -이 발생하는 그 어떤 애니메이션을 포함하지 않는 다른 인스턴스를 찾았습니다. 이상하게도, 한 div의 위치가 고정되어있는 동안 다른 위치가 절대로 설정된 경우에는 이상하게 발생합니다. 여기를 참조하십시오. http://codepen.io/anon/pen/wooRME 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; 
} 

Answer 1

그래서 나는이 문제를 생각했다. 애니메이션이 진행되는 동안 본체가 요소로 간주되지 않으므로 1 개의 불투명도로 노란색이 표시됩니다. 다른 블렌드 모드로 테스트했는데 항상 노란색으로 보입니다. ('차이로 설정하면 예상 결과가 노란색 대신 흰색이됩니다.)

그래서 수정 사항이 있습니까? 100 % 크기와 검정색 배경으로 div를 추가하십시오! 그런 다음 노란색은 섞여서 나타나지 않습니다. 여기

는 펜에서 일 코드입니다 :

HTML - 추가 BG의 사업부 :

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

나는 또한 창을 채우기 위해 몸을 변경 :

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

는 CSS의 그래서 여백도 황색이 아니었다. 또는 div div는 본문의 함수로 크기가 조정될 수 있습니다.

@chrscblls님께 서 태그를 지정 했으므로 아무 것도 찾지 못했습니다.

---

편집

: 문제 codepen 다른 들어

같은 상점하지 않았다. 그들은 회색 배경 위에 이미지와 노란색 사각형을 어둡게하려고했습니다.

회색 배경에 노란색을 표시하지 않으려면 이미지를 div에 넣고 :: after를 사용하여 색상을 혼합하십시오. 또는 빈 div를 만들고 배경 이미지로 사용하고 :: after를 사용하십시오.

이 : 사업부의 CSS의 '배경 이미지'없이

<div><img src="http://lorempixel.com/500/500/"></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/> 

.