问题:前端如何制作高斯模糊的背景图
最近在开发模仿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