CSS通过blur实现高斯模糊

通常的，CSS中我们可以通过blur(radius)函数实现高斯模糊，blur函数也是CSS中滤镜函数使用频率较高的一个，通过高斯模糊设置可以让我们的输出图像具有更好的呈现。函数格式如下：

blur(radius)

radius：radius一般用于设置模糊半径，值越大，模糊程度越大，当值为0的时候图像与原图保持一致。支持数据格式如:em、rem、px、ex、ic、rlh、vh、vw、vi、vmin、vmax、vb、cm、mm、in、pc等。

浏览器兼容性

blur函数所有主流浏览器均支持。

示例

如下通过一个示例来看下设置高斯模糊的效果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>通过blur设置图片高斯模糊</title><style>* {box-sizing: border-box;}body {min-height: 100vh;display: grid;/* 1ch 等于一个 0 的宽度 */

CSS通过blur实现高斯模糊相关推荐

css filter blur 白边,解决css3毛玻璃效果(blur)有白边问题
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = window.innerWidth || document.documentElement.clientWidth || ...
css filter blur 白边,如何解决CSS3毛玻璃效果blur有白边的问题
如何解决CSS3毛玻璃效果blur有白边的问题发布时间:2021-06-29 11:59:54 来源:亿速云阅读:81 作者:小新这篇文章给大家分享的是有关如何解决CSS3毛玻璃效果blur有白 ...
CSS中如何使用高斯模糊
高斯模糊 1.首先来认识一下Filter-css3属性:提供的图形特效,像模糊,锐化或元素变色. 过滤器通常被用于调整图片,背景和边界的渲染. 名称说明初始值 none 适用元素图片元素.背景图 ...
css filter blur 白边,CSS3的blur白边怎么去除
这次给大家带来CSS3的blur白边怎么去除,去除CSS3的blur白边注意事项有哪些,下面就是实战案例,一起来看一下. 做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = ...
css filter:blur和filter:contrast对比度能实现元素相交变得清晰并呈现水滴交融的效果
filter:blur会造成元素模糊 filter:contrast设置对比度,能实现元素更亮|淡交融效果:方式一:元素设置filter:blur模糊,元素父级设置contrast时,会实现模糊元素相 ...
css实现遮罩层高斯模糊，毛玻璃效果
突然设计搞了一种想法,当遮罩层谈起来的时候,能不能搞一种模糊让用户看不清遮罩层下面的内容然后ui小姐姐说,要是做不出来就不做了,我说能做出来,怎么能让ui小姐姐看不起呢先看下加模糊滤镜之前的效 ...
uniapp小程序毛玻璃效果白边去除
css 毛玻璃效果出现白边解决方法使用了css,filter: blur(5rpx)高斯模糊,可以看到出现了白边使用:transform:scale(1.2)可以将整个结构放大,将白边隐藏掉前提 ...
css背景图片高斯模糊_CSS3 filter(滤镜) 制作图片高斯模糊无需JS
本帖最后由 fengrui99 于 2019-7-8 11:20 编辑这是一个寂寞的工作日,因为没有女盆友所以很寂寞,因为很寂寞所以来写教程.希望再看教程的你也是单身!啊,知道你是单身枫瑞贼开心!爽 ...
UnityShader - 屏幕特效 - 高斯模糊（Gaussian Blur）
高斯模糊(Gaussian Blur) 高斯模糊Gaussian Blur 概述原理游戏中对高斯模糊的优化 shader代码实现总结概述在电子世界中常常会接触到高斯模糊,它常出现在图像处理的 ...

CSS通过blur实现高斯模糊

浏览器兼容性

示例

CSS通过blur实现高斯模糊相关推荐

最新文章

热门文章