css3 – 如何在图像中制作羽毛?

发布时间:2020-09-15 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了css3 – 如何在图像中制作羽毛?编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个图像,需要在底部的羽化效果.如何单独使用 css3.

作为一个例子,我在演示中放置了我的羽毛和无羽毛图像

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

Live Demo

解决方法

CSS3 Gradients用于实现羽毛效果.由于羽毛位于底部,因此您可以将线性渐变的值用于底部的百分比值.即在各种停工水平.

在每个停止级别更改不透明度以获得更平滑的效果.

.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%,0) 80%,0.99) 87%,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>

总结

以上是编程之家为你收集整理的css3 – 如何在图像中制作羽毛?全部内容,希望文章能够帮你解决css3 – 如何在图像中制作羽毛?所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478