투명도가있는 PNG 이미지 주위에 그림자를 어떻게 추가합니까?

Question

투명도가 인 png에 그림자를 추가하고 싶습니다.

자동으로 이것은 상자 그림자가 밖으로 나가는 것을 의미합니다. 그림자는 이미지의 경계 상자 주변의 직사각형입니다.

이

-webkit-filter: drop-shadow(0px 0px 250px rgba(255, 255, 255, 0.4)); 
filter: drop-shadow(0px 0px 250px rgba(255, 255, 255, 0.4)); 

그것은 잘 보이지만 특히 크롬의 성능, 매우 느립니다 :

또한 드롭 그림자를 시도했다.

내가 알고있는 유일한 대안은 이미지 자체 내에 그림자를 추가하는 것입니다. 그러나 그림자는 넓은 확산 (이미지 크기가 너무 큼)을 가지고 있으며 압축하면 무서운 것처럼 보입니다.

다른 옵션/제안 사항이 있습니까?

Answer 1

순간적으로 filter 속성이 실험적으로 간주되기 때문에 매우 빠른 것으로 기대하지는 않습니다. 나는 모든 브라우저에서 작동 할 것이라고 기대하지 않는다. (나는 너에게 말하고있다. Internet Explorer!). 따라서 지금은 이러한 종류의 기능을 사용하지 않는 것이 좋습니다.

그래서 무엇을 할 수 있습니까? 제 생각에는 이미지가 어떻게 보이는지에 따라 두 가지 옵션이 있습니다.

1) SVG 이미지로 만들고 드롭 섀도우를 추가 할 수 있습니다. 이에 대한 자세한 내용은 this question을 참조하십시오.

2) 또는 png 파일이 SVG에서 너무 복잡하면 Photoshop 또는 paint.NET과 같은 도구를 사용하여 이미지 자체에 그림자를 추가 할 수 있습니다.