给定图像,有没有办法用css软化边缘?或者通过一些js库(虽然css会更受欢迎)?这个想法是图像的边缘应该模糊成透明度,因此它们更适合背景。
示例,原始图片:
边缘变软的图像:
在stackoverflow上有很多类似的问题,但是没有(我能找到的)提供答案来做到这一点。大多数情况下,他们担心模糊整个图像,或者在图像上设置半透明边框,这些都不是我正在寻找的。 p>
答案 0 :(得分:7)
您可以尝试这样的事情:
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;
}
答案 1 :(得分:1)
您可以尝试:fiddle
<div class="shadow">
<img src="http://via.placeholder.com/350x150/" />
</div>
和CSS。
shadow
{
display:block;
position:relative;
}
img {
width: 100%;
height: 100%;
}
.shadow:before
{
display:block;
content:'';
position:absolute;
width:100%;
height:100%;
-moz-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
-webkit-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
}