前端学堂
学有所用

2016-03-24早读


技术鸡汤

如果大海能够 带走我的 肥肉, 那么我就可以 漂流!带上 我的 媳妇, 带上 我的 孩子,一起 去 玩漂流!

2016-03-24早读

1.一张图告诉你 Elon Musk 所有的故事
效果真的很赞!!!

2.Freebie: “Boxify” One Page Website Template
预览地址: https://tympanus.net/Freebies/Boxify/

css3实现高斯模糊

关于高斯模糊,参考阮大师的博客:
1.高斯模糊的算法
2.相似图片搜索的原理
一言以蔽之,就是采用高斯函数确定模糊半径内的所有像素点的权重值。

可以采用css3的滤镜来实现,代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.f-blur {
filter: url(/res/images/common/blur.svg#blur); /* FireFox, Chrome, Opera */
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
.u-courseImg{
width: 100%;
min-height: 400px;
z-index: -1;
position:absolute;
}
</style>
<img src="图片地址" width="100%" class="f-pa u-courseImg" alt="原图">
<img src="图片地址" width="100%" class="f-pa u-courseImg f-blur" alt="原图">

为什么采用两张图片呢?问得好,因为高斯模糊图片边缘会有白框,为什么有白框呢?你可以试试看。所以防止原图在最下面作为背景图层即可。

谢谢!

转载请注明出处://fed123.oss-ap-southeast-2.aliyuncs.com/2016/03/24/2016_03_24_read/
欢迎关注皓眸学问公众号(扫描左侧二维码),每天好文、新技术!任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T

赞(0) 打赏
未经允许不得转载:前端学堂 » 2016-03-24早读

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏