불투명도가있는 위쪽 div와 같은 SVG 또는 CSS 필터

Question

CSS 필터 또는 SVG 필터를 찾는 간단한 방법이 있는지 궁금합니다. div가 이미지 위에 배경 및 불투명도로 적용되는 것과 같습니다. 과 같이 (나는 'didn를 -

가 나는

.img { 
    filter: ... 
} 

https://jsfiddle.net/1qd6pyfu/이 기본적인 곱셈의 혼합에 아주 가까이 보인다

Answer 1

두 번째 이미지처럼 보이게하기 위해 첫 번째 이미지에 적용 할 수있는 필터를 필요 녹색 색상과 완전히 일치합니다. "CSS 블렌드 모드에서도이 작업을 수행 할 수 있습니다.

<svg width="800px" height="600px"> 
    <defs> 
    <filter id="greenit" x="0%" y="0%" width="100%" height="100%"> 
    <feFlood flood-color="#8B5"/> 
    <feBlend mode="multiply" in2="SourceGraphic"/> 
    </filter> 

    </defs> 

    <image filter="url(#greenit") width="400px" height="400px" xlink:href="https://www.binarymoon.co.uk/wp-content/uploads/2012/04/draw-something-unicorn-e1334932907258.png"/> 

</svg>