前端css 页面高斯模糊效果

问题：前端如何制作高斯模糊的背景图

最近在开发模仿APP页面，制作mp3播放器背景的时候，需要用到高斯模糊的背景图，前端如何实现呢？
这时候我们就要说到 CSS 3 中的一个属性Filter 了。

先说案例吧，效果图如下：

<div class = 'playerBox'><img class="bg_color" src="http://edit.2or3m.com/subject/php/20180109/0/HDE6TPj5Tc.jpg"/>
</div>.playerBox{width: 100%;height: 422/@rem;position: relative;overflow: hidden;  /*这个是必须加的，否则会有阴影层*/
}
.bg_color{width: 100%;height: 100%;position: absolute;-webkit-filter: blur(60/@rem);-moz-filter: blur(60/@rem);-o-filter: blur(60/@rem);-ms-filter: blur(60/@rem);filter: blur(60/@rem);
}

Filter-css3属性

CSS滤镜（filter）：
提供的图形特效，像模糊，锐化或元素变色。
过滤器通常被用于调整图片，背景和边界的渲染。

名称	说明
初始值	none
适用元素	图片元素、背景图元素、文字内容等，即所有元素使用
继承性	不继承
适用效果	视觉处理
JS语法	object.style.WebkitFilter= “blur(20px)”

属性：

属性名	属性介绍	填写方式
none	无效果	默认值
grayscale	灰度	百分比
sepia	褐色	百分比
saturate	饱和度	百分比
hue-rotate	色相旋转	deg
invert	反色	百分比
opacity	透明度	百分比
brightness	亮度	百分比
contrast	对比度	百分比
blur	模糊	px
drop-shadow	阴影	h-shadow v-shadow blur spread color

用法：

1.添加属性：-webkit-filter: 属性名(属性值);
2.复合写法 : -webkit-filter: 属性名1(属性值1) 属性名2(属性值2) 属性名3(属性值3);

Filter() 函数

filter()函数接受两个参数：

filter(<url>, <filter-function-list>)

其中是指一个图像，是一个过滤器。
这两者结合在一起将会返回一个处理过的新图像。
例如：

.element {background: filter(url(path/to/img.jpg), blur(5px));
}

Filter相关链接：https://www.jianshu.com/p/afe2a6a203c2

前端css 页面高斯模糊效果相关推荐

CSS设置高斯模糊效果
高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop.GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果,通常用它来减少图像噪声以及降低细节层次 ...
CSS背景图片高斯模糊效果
问题来源背景图片的高斯模糊效果已经屡见不鲜了,最典型的也就是QQ音乐的播放器页面,看起来有种回忆过去的感觉.CSS如何实现这种效果呢?其实也很简单,利用CSSfilter属性就能实现,下面是在uni ...
黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
CSS实现背景图片高斯模糊效果
效果演示未添加高斯模糊的效果: 代码: body {background: url(./images/bg.jpg);background-size: cover; } 添加了高斯模糊的效果: 代码 ...
css如何添加模糊效果,css动态模糊效果
实例效果:请把鼠标放上去看看第一步:把下面的脚本插入与之间: function on(she){ girl=she move=setInterval("moving(girl)" ...
微信小程序开发：实现高斯模糊效果（毛玻璃效果）
前言在微信小程序开发的时候,也会遇到一些和在前端开发一样的样式需求,二者的相通类似性非常的高,就拿样式相关的需求来说,可以说是一模一样的操作.那么本文就来分享一个关于实现高斯模糊效果的需求,微信小程 ...
好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
php nodejs 前台,NodeJS之前端注册页面
本文主要给大家介绍了NodeJS之前端注册页面的相关知识,文中通过示例代码介绍的非常详细,对大家学习具有一定的参考学习价值,希望能帮助到大家. app.js文件为://应用程序的启动入口文件 //加载 ...
浅谈前端实现页面加载进度条以及 nprogress.js 的实现
以前在 Vue 的项目用了 nprogress 这个插件,一直对于其如何得知加载进度充满好奇,最近又看到了「前端如何实现页面加载进度条」这个问题,今天周六恰好一探究竟.以下仅为一家之言,如有异议,欢迎 ...