失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 【css】css实现图片或动图边缘模糊化处理(附示例代码)

【css】css实现图片或动图边缘模糊化处理(附示例代码)

时间:2021-08-24 15:15:06

相关推荐

【css】css实现图片或动图边缘模糊化处理(附示例代码)

我是一个甜甜的大橙子🍊,欢迎关注✉️!

我相信技术的力量💪

努力将所学分享给大家😎

你的点赞❤️分享🚀收藏📖就是对我最大的鼓励!

问题

有些图片边缘和网页背景颜色对比较明显,但是我们想将其边缘模糊化,实现下图效果,怎么做?

解决思路

1.在图片外层套一个div容器。

2.然后为外层div添加一圈向内的边缘阴影,模拟图片边缘模糊效果。

代码实现

.html文件

<div class="cover"><img src="{{ url_for('static', filename='images/physics.gif')}}" alt="physics" class="physics"></div>

.css文件

.physics {display: block;margin: 0 auto;height: 100px;}.cover {margin: 0 auto;width: 133px;height: 100px;position: relative;}.cover:after {position: absolute;content: '';width: 100%;height: 100%;top: 0;box-shadow:0 0 50px 30px #ffffff inset;}

参考链接

如果觉得《【css】css实现图片或动图边缘模糊化处理(附示例代码)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。