如何在图像中制作羽毛？

Question

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

作为示例，我将feathered和no-feathered图片放在demo

中

任何人请建议我在底部添加羽毛的正确方法？

Live Demo

Answer 1

CSS3 Gradients用于实现羽毛效果。由于羽毛位于底部，因此您可以将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>