❤比较两种模糊特效❤filter: blur(10px)和backdrop-filter: blur(10px)的区别

请先忽略背景图，遮罩位置是随便放的，我们主要关注下面的代码↓

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>❤比较两种模糊特效❤filter: blur(10px)和backdrop-filter: blur(10px)的区别</title><style>html {margin: 0;padding: 0;position: absolute;/*背景图片*/width: 100%;height: 100%;background: transparent url(https://sc.68design.net/photofiles/202102/qfLzFzr5bb.jpg) no-repeat center / cover;}.square {left: 0;width: 100%;height: 200px;position: absolute;color: white;font-size: 30px;font-weight: bold;display: flex;justify-content: center;align-items: center;}h1 {width: 100%;position: absolute;top: 350px;text-align: center;color: white;z-index: 1;}/*让div自己模糊*/.square1 {top: 300px;background: red;filter: blur(10px);}/*让div遮住的部分模糊*/.square2 {top: 500px;backdrop-filter: blur(10px);}</style>
</head>
<body>
<h1>自己模糊 filter: blur(10px)</h1>
<div class="square square1"></div>
<div class="square square2">遮住的部分模糊 backdrop-filter: blur(10px)</div>
</body>
</html>

❤比较两种模糊特效❤filter: blur(10px)和backdrop-filter: blur(10px)的区别相关推荐

MATLAB图像的两种模糊模式
下面为大家介绍一下如何利用inline和blkproc函数对图像进行模糊度采集和显示,具体步骤如下: 1.首先打开MATLAB,在其主界面的编辑器中写入下列代码: B=imread('tire.tif ...
HTTP 和 HTTPS 两种传输协议各自含义是什么？二者使用有什么区别?
文章目录前言一.什么是 HTTP 传输协议? 二.什么是 HTTPS 传输协议? 三.HTTP 和 HTTPS 有何区别? 总结前言 HTTP 属于超文本传输协议,用来在 Internet 上传 ...
AE火焰特效怎么做？两种方法快速实现高大上效果！
酷炫的AE火焰特效怎么做? 两种方式教你快速实现这么高大上的效果! 方法1:用到爱剪辑里的"烈火燎原"的动景特效先可以看看加上火焰特效后,画面一下有了炸裂的视觉感. 把视频导入到 ...
【参赛作品37】openGauss/MogDB数据库函数创建的两种风格
作者:彭冲 PostgreSQL风格 create or replace function months_between() returns number as $function$ beginret ...
【MIMO】两种空间相关信道生成方式的记录（公式+MATLAB代码）
文章目录前言一. Kronecker相关信道模型二.生成方式1 1.公式 2.MATLAB代码三.生成方式2-complex correlation 1.公式 2.MATLAB代码四.生成方 ...
Quartus-II两种方式实现D触发器及时序仿真和波形验证
目录一.实验所用软件安装二.D触发器简单介绍三.Quartus-II构造原理图并时序仿真 (1)创建项目 (2)创建电路图 (3)进行时序仿真四.调用D触发器仿真 (1)创建项目 (2)创建电 ...
cst操作——做倒角、走线、螺旋、两种局部拉伸的方法、参数扫描
做倒角 ① ②几条线一起做倒角(可pick 边缘chain快速做倒角) 走线螺旋两种局部拉伸的方法 ①利用modify locally ②利用Extrude face ③两者区别参数扫描实例:
html图片做成菱形,两种css实现菱形的方法以及拓展特效
提到用css实现菱形,在我看来有两种比较便利而且兼容性不错的方法,实现的方式也都不难,但是简单的方法其实也可以做出一些眼前一亮的特效,后面会为大家介绍,下面先来说说两种实现菱形的方式. 方法一:bor ...
HTML/CSS实现毛玻璃特效的两种方法
我想要设置类似于苹果和windows10的毛玻璃效果,比如这样: 其实就是一圈高斯模糊,我认为底层可以实现的方式有两种:高斯模糊和领域池化. 以下实现视觉上的毛玻璃效果有两种,后者为伪毛玻璃,而且在视 ...

❤比较两种模糊特效❤filter: blur(10px)和backdrop-filter: blur(10px)的区别

❤比较两种模糊特效❤filter: blur(10px)和backdrop-filter: blur(10px)的区别相关推荐

最新文章

热门文章