前端css 页面高斯模糊效果

2018/12 06 01:12
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34664239/article/details/79165494

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

最近在开发模仿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
);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

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>)
  • 1

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

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

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

--转载请注明: http://91o.cc/%e5%89%8d%e7%ab%afcss-%e9%a1%b5%e9%9d%a2%e9%ab%98%e6%96%af%e6%a8%a1%e7%b3%8a%e6%95%88%e6%9e%9c/

发表回复

(必填)