투명한 이미지에서 그림자 및 배경색

Question

배경을 설정하면 드롭 섀도우 필터가 자유 형식을 무시하고 이미지 직사각형 윤곽에만 적용됩니다.

img { 
    background: lightgreen; 
    filter: drop-shadow(0 0 10px red); 
} 

이는 SVG 필터를 사용하여 달성 할 수 https://jsbin.com/zoseru/2/edit?css,output

Answer 1

를 참조하십시오

---

// css 
img { 
    filter: drop-shadow(0 0 10px red) url(#background); 
} 

<!-- in your html --> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filterdef"> 
    <filter id="background" x="0" y="0" width="100%" height="100%"> 
    <feFlood flood-color="lightgreen" result="bg"></feFlood> 
    <feComposite in2="bg" in="SourceGraphic"></feComposite> 
    </filter> 
</svg> 

이 필터의 순서가 중요 있습니다.

https://jsbin.com/zoseru/3/edit?html,css,output