本文将介绍一种巧用 background 配合 backdrop- filter 来构建有趣的透视背景效果的方式。

本技巧源自于一名群友的提问,如何构建如 ElementUI 文档的一种顶栏背景特效,看看效果:

仔细看,在页面的的滚动过程中,顶栏的背景不是白色的,也不是毛玻璃效果,而是能够将背景颗粒化:

准确而言,是一种基于颗粒化的毛玻璃效果,元素首先是被颗粒化,其次,元素的边缘也是在一定程度上被虚化了。那么,我们该如何实现这个效果呢?

需求拆解

上述效果看似神奇,其实原理也非常简单。主要就是颗粒化的背景 background加上backdrop-filter: blur() 即可。

首先,我们需要实现颗粒背景。

我们利用 background 实现这样一个背景:

<div></div>
div {
background: radial-gradient(transparent, #000 20px);
background-size: 40px 40px;
}

从透明到黑色的径向渐变效果如下:

需要注意的是,图里的白色部分其实透明的,可以透出背后的背景。此时,如果背景后面有元素,效果就会是这样:

好,我们将 background: radial-gradient(transparent, #000 20px) 中的黑色替换成白色,效果如下:

这里为了展示原理,每个径向渐变的圆设置的比较大,我们把它调整回正常大小:

div {
background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
background-size: 4px 4px;
}

这样,我们就成功的将背景颗粒化:

当然,此时透出的背景看上去非常生硬,也不美观,所以,我们还需要 backdrop-filter: blur(),我们加上一个试试看:

div {
background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
background-size: 4px 4px;
backdrop-filter: blur(10px);
}

这样,我们就实现了一开始所展示的效果:

这里需要注意的是,background-size 的大小控制,和不同的 backdrop-filter: blur(10px) 值,都会影响效果。

完整的 DEMO,你可以戳这里:CodePen Demo -- Mask Filter

当然,掌握了这个技巧之后,我们可以尝试替换掉 background: radial-gradient() 图形,及改变 background-size,尝试各种不同形状的透视背景。简单举几个例子:

div {
background: linear-gradient(45deg, transparent, #fff 4px);
background-size: 6px 6px;
backdrop-filter: saturate(50%) blur(4px);
}

这里使用了 linear-gradient() 替换了 radila-gradient()

最后

一个非常小的技巧,运用在恰当的地方可以很好的提升页面的质感,你学会了吗?

本文到此结束,希望对你有帮助

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

妙用 CSS 构建花式透视背景效果的更多相关文章

  1. 使用 CSS 构建强大且酷炫的粒子动画

    粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画.传统的粒子动画主要由 Canvas.WebGL 实现. 当然,不使用 HTML + CSS 的主要原因在于,粒子动画通常需要较多的粒子,而如 ...

  2. DOM 操作成本究竟有多高,HTML、CSS构建过程 ,从什么方向出发避免重绘重排)

    前言: 2019年!我准备好了 正文:从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM.尤其是React.vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQ ...

  3. 妙用 background 实现花式文字效果

    本文将讲解如何利用 background 系列属性,巧妙的实现一些花式的文字效果.通过本文,你将可以学到: 通过 background-size 与 background-position 实现酷炫的 ...

  4. 巧用 CSS 构建渐变彩色二维码

    今日,群里有个很有意思的问题,问我如何实现一个彩色的,带渐变的二维码,像是这样: 很有意思的问题,我们在百度谷歌,搜索 qrcode,能搜到非常多在线制作二维码的工具,它们其中一些也会带有制作渐变二维 ...

  5. js css 构建滚动边框

    注:预览效果请点击result选项卡,个人认为这种效果非常适合做友情链接. 完整代码 <!DOCTYPE html> <html xmlns="http://www.w3. ...

  6. 排行榜妙用——CSS计数器

    碰到的坑 小伙伴你们是否有碰到以下的情况,排行榜前3名的样式不一样,你们是怎么处理的么?

  7. HTML&CSS构建和设计网站

    1.a链接:两个特性,href.target,href里添加mailto:邮箱可以直接链接到其它人的邮箱,添加#id,可以把窗口位置直接定位到该id的元素位置, target:_black可以在新的窗 ...

  8. Html,css构建一个对话框,练习201911281028

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用

    https://electronjs.org/ —— 官网 https://github.com/electron/electron-api-demos/releases —— 下载demo 下载安装 ...

随机推荐

  1. 69. Sqrt(x) - LeetCode

    Question 69. Sqrt(x) Solution 题目大意: 求一个数的平方根 思路: 二分查找 Python实现: def sqrt(x): l = 0 r = x + 1 while l ...

  2. 693. Binary Number with Alternating Bits - LeetCode

    Question 693. Binary Number with Alternating Bits Solution 思路:输入一个整数,它的二进制01交替出现,遍历其二进制字符串,下一个与上一个不等 ...

  3. CentOS7防火墙firewalld的配置

    开机启动的开启与禁止 # 开机启动 systemctl enable firewalld # 禁止开机启动 systemctl disable firewalld 基本操作 # 查看状态 system ...

  4. 130_传析阅管理系统accdb64位版本

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 几年前笔者针对家居门店的进销存.人员管理.工资管理.任务系统.门店经营盈亏管理.销售分析.考勤请假等息息相关的业务基于Ac ...

  5. df-查看磁盘目录空间大小

    查看磁盘分区挂载情况. 语法 df [option] 选项 -T 显示文件系统类型. -h 带单位显示. 示例 [root@localhost ~]# df -Th Filesystem Type S ...

  6. [USACO16JAN]Angry Cows G 解题报告

    一图流 参考代码: #include<bits/stdc++.h> #define ll long long #define db double #define filein(a) fre ...

  7. “极简”创建 github page 并设置域名

    最简单最详细的,创建 github page 并设置域名,没有多余的步骤,并且多图,对新手特别友好 尝试用 github page 创建博客,并设置独立域名.网上找了许多教程,都太复杂.自己的创建过程 ...

  8. 使用 Nocalhost 开发 Rainbond 上的微服务应用

    本文将介绍如何使用 Nocalhost 快速开发 Rainbond 上的微服务应用的开发流程以及实践操作步骤. Nocalhost 可以直接在 Kubernetes 中开发应用,Rainbond 可以 ...

  9. model.apply(fn)或net.apply(fn)

    详情可参考:https://pytorch.org/docs/1.11/generated/torch.nn.Module.html?highlight=torch%20nn%20module%20a ...

  10. 判断语句、if嵌套

    判断语句 上一篇我们使用了一下if语句当然我们不止这些 我们上一个只是判断出如果满足条件会执行,那么我们想一想如果不能满足该会怎么样! 当然 还有一种语句叫做if else 他的语法格式是: if ( ...