本文将介绍一种巧用 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. DOM 操作成本究竟有多高,HTML、CSS构建过程 ,从什么方向出发避免重绘重排)

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

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

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

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

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

  4. js css 构建滚动边框

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

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

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

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

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

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

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

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

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

  9. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

  10. 神奇的 CSS,让文字智能适配背景颜色

    最近几天,有好几个同学都问了同样一个问题. 页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色.像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色.看 ...

随机推荐

  1. OC-内存管理-基本原理与引用计数器

    基本原理 1. 什么是内存管理 移动设备的内存极其有限,每个app所能占用的内存是有限制的 当app所占用的内存较多时,系统会发出内存警告,这时得回收一些不需要再使用的内存空间.比如回收一些不需要使用 ...

  2. FreeBSD_11-系统管理——{Part_3-网络}

    一.Network Servers DNS unbound/local_unbound # /etc/rc.conf local_unbound_enable="YES" # 测试 ...

  3. Javascript 添加自定义静态方法属性JS清除左右空格

    例如加trim()清除左右空格 String.prototype.trim=function() { return this.replace(/(^\s*)|(\s*$)/g,''); } 调用 va ...

  4. python 面向对象简单理解

    面向对象: 是一种程序设计范型 作用: 提高软件的重用性和灵活性,扩展性 世界万物一切皆为对象,对象即是指由特定状态,特征,行为的实体   知识点一: 代码的重用 举个栗子 比如小月月有了一个女朋友1 ...

  5. JUnit4中的测试套件

    测试套件 JUnit3.8中,用测试套件同时运行多个测试类(http://www.cnblogs.com/mengdd/archive/2013/04/07/3006265.html). 在JUnit ...

  6. bzoj 3566: [SHOI2014]概率充电器

    Description 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品--概率充电器:"采用全新纳米级加工技术,实现元件与导线能否通电完全由真随机数决定!SHOI 概率 ...

  7. poj1470 LCA倍增法

    倍增法模板题 #include<iostream> #include<cstring> #include<cstdio> #include<queue> ...

  8. python 中迭代和遍历的区别

    什么是迭代? 迭代就是重复运行一段代码语句块的能力.分为两种方式 使用递归函数 使用循环(for 或 while 循环) 假设有个需求,要按照降序打印10以下(包括10),0 以上的整数,用递归和循环 ...

  9. exim CVE-2017-16943 uaf漏洞分析

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 这是最近爆出来的 exim 的一个 uaf 漏洞,可以进行远程代码 ...

  10. Direct3D中 SetTextureStageState 函数

    先说明几个概念: 1, Multipass(多通道)     将一个任务划分成几个阶段,由多个pass处理不同阶段,后续pass总是处理前一个pass的结果.例如复杂的光照方程可以分成几个pass来计 ...