아래에있는 요소가있는 CSS 블렌드 배경

Question

이없는 자식 요소의 배경 블렌드가 인 경우 mix-blend-mode을 사용하고 있습니다.이 부분은 현재로서는 충분히 지원되지 않습니다 (읽기 : Chrome에서는 지원되지 않습니다.)? CSS를

element{ 
    filter: grayscale(100%); 
    filter: url(#greyscale); 
    filter: gray; 
    -webkit-filter: grayscale(1); 
} 

당신은 이미지 흑백을 할 수와

Answer 1

:

아래 그림은 내가 무슨 말을하는지의 원유 예입니다.

내가 제안하는 것은 배경 만들기입니다. 그런 다음 배경이 동일한 div를 만들고 위에 표시된 CSS를 사용하여 흑백으로 만듭니다.
그런 다음 div를 움직이고 아래 이미지와 일치하도록 background-size 및 background-position 속성을 설정할 수 있습니다.

트릭을 만들어야합니다.

여기에 Fiddle이 있습니다.

Answer 2

순수 CSS에서는이 작업을 수행 할 수있는 방법이 없지만 background을 필터링하고 해당 부모의 값을 background-size으로 설정하고 background-position을 다음과 같이 설정하는 자바 스크립트 솔루션을 원하는 사람들에게 적합합니다. 음수는 이미지를 필터링하려는 배경에서 오프셋합니다.

JS Fiddle

이 어떤 텍스트 또는 일반적으로 여러 배경을 고려하지 않고 여과한다. 그리고 mix-blend-mode은 기다리는 것이 유일한 생각처럼 보입니다.