2.backdrop-filter：为元素后面区域添加图形效果2023-12-20

backdrop-filter：为元素后面区域添加图形效果

该属性可以让你为一个元素后面区域（即背景区域）添加图形效果（如模糊或颜色偏移）。它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。作用于元素背后的区域所覆盖的所有元素

与filter的区别：filter作用于元素本身，backdrop-filter作用于元素背后的区域所覆盖的所有元素。

 backdrop-filter: <filter-function>

代码示例：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        body,
        html {
            width: 100%;
            height: 100%;
        }
 
        .bg {
            background: url("https://img1.baidu.com/it/u=1678478611,2011823497&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
            background-size: cover;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .bg div {
            width: 200px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.3);
        }
 
        .bg .filter {
            //下面的过滤器函数示例均改动这里
            backdrop-filter: blur(16px);
        }
    </style>
</head>
 
<body>
    <div class="bg">
        <div class="filter">
            hello world!
        </div>
    </div>
</body>
 
</html>

<filter-function>是CSS数据类型，代表可以改变输入图像外观的图形效果，可以用于filter和backdrop-filter属性，可选的过滤器函数有：

blur(radius)：模糊图像。radius代表了模糊半径
```
 backdrop-filter: blur(16px);
```
brightness(amount)：让图像更明亮或更暗淡。amount表示输出亮度，是一个百分数(小数)，大于100%变亮，小于100%变暗
```
 backdrop-filter: brightness(320%);
```
contrast(amount)：增加或减少图像的对比度。amount表示输出的对比度，是一个百分数(小数)，大于1会增加对比度，小于1降低对比度
```
 backdrop-filter: contrast(300%);
```
drop-shadow(offset-x offset-y blur-radius spread-radius color)：在图像后方应用投影

offset-x指定水平距离，其中负值将阴影放置到元素的左侧。

offset-y指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为 0，则阴影直接放置在元素后面。
blur-radius阴影的模糊半径
spread-radius阴影的扩展半径。正的值会导致阴影扩大和变大，而负的值会导致阴影缩小，未指定则默认为0，大多数浏览器不支持这个参数

color阴影的颜色
```
 filter: drop-shadow(30px 10px 4px blue);
//backdrop-filter使用没有效果
```
grayscale(amount)：将图像转变为灰度图。amount表示转变值的大小，是一个百分数(小数)，0% 时与原图没有区别。0% 到 100% 之间的值会使灰度线性变化。amount 为空时使用值为1
```
 backdrop-filter: grayscale(1);
```
hue-rotate(angle)：改变图像的整体色调。angle表示输入样本的色调的相对变化，指定为角度，如 hue-rotate(180deg)
```
 backdrop-filter: hue-rotate(90deg);
```
invert(amount)：反转图像颜色。amount表示转换量，是一个百分数(小数)。100%的值完全反转，而0%的值使输入保持不变。0%到100%之间的值是效果的线性乘数。插值的初始值为0。
```
 backdrop-filter: invert(1);
```
opacity(amount)：改变图像透明度。amount表示转化的数值。是一个百分数(小数)，值为 0% 是完全透明的，值为 100% 会保留原来的效果。值在 0% 与 100% 之间效果为线性变化的，参数的最小差值为 1。
```
 filter: opacity(45%);
//backdrop-filter使用没有效果
```
saturate(amount)：超饱和或去饱和输入的图像。amount表示转换量。是一个百分数(小数)，低于100%使图像去饱和，而高于100%使图像超饱和。值0%为完全不饱和，而值为100%保持输入不变。插值的初始值为。
```
 backdrop-filter: saturate(350%);
```
sepia(amount)：将图像转为棕褐色。amount表示转换量，是一个百分数(小数)，100%的值完全是棕褐色的，而0%的值使输入保持不变。0%到100%之间的值是效果的线性乘数。插值的初始值为0。
```
 backdrop-filter: sepia(1);
```

posted @ 2023-12-20 22:42 Ewar-k 阅读(385) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· css中使用百分比时的参照-------持续更新

· 选择器嵌套

· 你有使用过backdrop-filter吗？它有什么作用？

· css属性中的 filter 和 backdrop-filter 使用

· 工作时发现的黑科技

公告

🌏GitHub

昵称： Ewar-k
园龄： 1年3个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Ewar

码上好

backdrop-filter：为元素后面区域添加图形效果

backdrop-filter：为元素后面区域添加图形效果

公告

搜索

常用链接

我的标签

合集

随笔分类

随笔档案

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	body,
	html {
	width: 100%;
	height: 100%;
	}

	.bg {
	background: url("https://img1.baidu.com/it/u=1678478611,2011823497&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
	background-size: cover;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.bg div {
	width: 200px;
	height: 200px;
	background-color: rgba(255, 255, 255, 0.3);
	}

	.bg .filter {
	//下面的过滤器函数示例均改动这里
	backdrop-filter: blur(16px);
	}
	</style>
	</head>

	<body>
	<div class="bg">
	<div class="filter">
	hello world!
	</div>
	</div>
	</body>

	</html>

	filter: drop-shadow(30px 10px 4px blue);
	//backdrop-filter使用没有效果