使用CSS将柔化边缘应用于图像

Question

给定一个图像,有没有办法使用CSS软化边缘？或者通过一些js库(虽然css会更受欢迎)？这个想法是图像的边缘应该模糊成透明度,因此它们更适合背景.

示例,原始图像:

边缘柔和的图像:

在stackoverflow上有许多类似的问题,但是没有(我能找到)提供答案来做到这一点.大多数情况下,他们关心的是模糊整个图像,或者在图像上设置半透明边框,这些都不是我想要的.

Answer 1

你可以尝试这样的事情:

JSFiddle示例

HTML:

<div id="image-container"><div>

CSS:

#image-container {
background: url(http://pic2.ooopic.com/11/26/30/31b1OOOPIC48.jpg) left top no-repeat;
box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset; 
width: 300px;
height: 300px;
}