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
其他阅读

LinqPad 8 分享下载

LinqPad是一个 .Net 快速验证工具,使得.Net开发者可以不借助 Visual Studio 就可以快速验证想法,毕竟vs冷启动和创建项目耗时久,负担大。本文分享一个LinqPad学习版,可直接下载使用。

查看原文

记录Unity中的坑

Unity虽然使用C#来进行开发,但是Unity所使用的运行时和.net的原生运行时却又差别,这导致在.net中的某些代码块在Unity中运行会出现错误。

查看原文

Js文件上传

文件上传是一个前端比较常见的功能,无论是以前的MVC客户端,还是现代化SPA客户端中,但万变不离其宗,其内核基本不变,本文就此讨论简单文件上传(以图片为例子)。

查看原文

在ASP.NET Core中使用过滤器

ASP.NET Core是一个高性能的Web开发框架,过滤器(Filter)在ASP.NET Core中被用于路由方法之上,可以在路由方法执行前后完成一些额外的操作。本文将会介绍在ASP.NET Core中使用 IActionFilter 实现过滤器并读取路由方法中的参数。

查看原文

西华湿地公园

昆明周末好去处。

查看原文