2020-06-17

每日学习一点小知识：

• [html] websocket是如何做心跳检测、数据加密、身份验证的？
• [css] 使用css如何设置背景虚化？
• [js] js源代码压缩都有哪些方法？它们的压缩原理分别是什么？
• [软技能] 对于用户的隐私你是如何看待的？

使用 css3 实现背景虚化

假设现在存在这样一个场景：产品需要你将某一宣传页面背景图片虚化，但是宣传内容不能受影响，如何处理？

对应的页面结构如下：

<header class="p-header">
	<p class="hd-content">这是我的相关内容</p>
</header>

.p-header {
	background: url(./test.jpg) center/cover no-repeat;
}
.hd-content {
	padding: 20px;
	line-height: 30px;
}

实现方式：

• 利用 CSS3 blur 滤镜 filter: blur(1px);
• 利用 SVG 滤镜
• 利用 canvas 进行图片转换

参考文章：

• 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
• CSS设置背景模糊