如何在图像中制作羽毛？

Question

我有一个图像，它需要在底部的羽化效果。如何独自使用css3。

一个例子，我把我的两个feathered和no-feathered图像中的demo

任何一个请建议我正确的方式在底部添加羽毛？

Live Demo

Answer 1

CSS3梯度用于在这里实现了羽毛的效果。由于羽毛在底部，因此可以使用linear-gradient的值to bottom和百分比值。即处于各种停工级别。

在每个停工级别更改opacity以实现更平滑的效果。

.shadow { 
 
    background: url(https://dl.dropboxusercontent.com/u/10268257/Feather/withFeather.png) no-repeat; 
 
    height: 216px; 
 
    width: 215px; 
 
} 
 
.no-shadow { 
 
    background: linear-gradient(to bottom, rgba(22, 49, 102, 0) 0%, rgba(22, 49, 102, 0) 80%, rgba(22, 49, 102, 0.99) 87%, rgba(22, 49, 102, 1) 100%), url(https://dl.dropboxusercontent.com/u/10268257/Feather/withoutFeather.png); 
 
    display: inline-block; 
 
    height: 216px; 
 
    width: 215px; 
 
}

<div class="no-shadow"></div> 
 
<div class="shadow"></div>