Apple中的模糊效果

本文主要介绍在前端里比较重要的一个效果——高斯模糊效果,也有人称为毛玻璃特效。在Mac和Windows系统样式上也都在使用模糊效果。下面聚焦于Web前端中的模糊效果开发。

css

模糊效果有两个主要用途,一个是对当前块的内容进行模糊;另一个是对当前块背景进行模糊,但内容是清晰可见的。这对应着css的两个属性,前者是filter,后者则为backdrop-filter

两个属性的用法几乎一致,属性本意为滤镜,系统本身已经预设了一些常用的滤镜效果,对于特殊效果,可能会需要使用到svg来实现。

请看下面的代码

header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 1);
    backdrop-filter: saturate(180%) blur(20px);
}

header元素是我们经常使用到的导航栏元素,上述代码是将其背景高斯模糊,并且固定在顶部,关于固定顶部可以查看这里

发布时间:2021-05-17
其他阅读

使用正则表达式来判断邮箱

在开发中,很多地方都需要用户输入邮箱,用户注册,登录需要邮箱,订阅消息需要邮箱,为了防止被恶意使用,一般都会使用正则表达式来判断输入是否符合邮箱规范

查看原文

Linux中查看,添加,修改,删除用户和用户组

将用户分组是Linux系统中对用户进行管理及控制访问权限的一种手段。某个用户都属于某个用户组;一个组中可以有多个用户,一个用户也可以属于不同的组。当一个用户同时是多个组中的成员时,登录时所属的为默认组,而其他组称为附加组。本文将会介绍在 Linux 中查看,添加,修改,删除用户和用户组,注意:权限管理非常重要,可能一不小心就导致系统无法登录,请谨慎操作。

查看原文

git的一些技巧

git 是一个免费开源分布式版本控制系统,可以高效处理从小型到超大型项目内容管理,本文会介绍一些 git 使用的技巧。

查看原文

新版本.Net关于Process.Start的问题

.Net 开发中,试用 Process.Start() 来启动一个新进程,当我们传入的是具体文件或者链接的时候,系统也会根据默认打开方式打开对应的进程。但是在新版本的 .Net 中,试用 Process.Start() 来打开文件或者链接的时候,会抛出 System.ComponentModel.Win32Exception 的错误,提示系统找不到指定的文件。

查看原文

WPF中CornerRadius是什么属性

在WPF中,CornerRadius 属性我们经常需要使用到,它的作用是用来设置控件的四个圆角,在 BorderButton 等控件中使用。等同于 css 中的 border-radius 设置。

查看原文