如何在圖像中製作羽毛？

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>