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

解决sqlite依赖无法打包单文件的问题

在一次WPF开发中,选用了sqlite作为内嵌数据库,使用 ystem.Data.SQLite 库来调用,在使用 Fody 进行单文件打包时,发现打包文成后会出现 x86 和 x64 两个特定的文件夹,分别对应着32位和64位的 SQLite.Interop.dll,本文介绍修改项目文件来实现将 sqlite 通信库一起打包成单文件的方法。

查看原文

WPF中开启虚拟化提高性能

WPF(Windows Presentation Foundation)是一个强大的框架,它能创建高度响应和美观的桌面应用程序。然而,当处理大量数据时,性能问题可能变得显著。为了解决这些问题,我们可以利用虚拟化来提升WPF应用的性能。

查看原文

Angular中开发一个代码库

Angular 的复杂项目中,我们可以对其拆分出不同功能模块进行开发,但是对于大型项目,或者我们直接考虑拆成库,将一部分的模块合起来组成一个库,方便复用,比如我们熟悉的各种设计组件库,就是一堆模块的合集。

查看原文

在ASP.NET Core中使用过滤器

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

查看原文

个人简介

你好,我是猪头少年,是一名定居在云南的软件工程师,主要的开发语言为 C#JavaScript,涉及 ASP.NET CoreWPFAngularUnity 以及 Babylon.js。平时喜欢自驾出游。欢迎大家联系我。

查看原文