嘿，各位观众老爷们，晚上好！我是你们的老朋友，今天咱们来聊点儿有趣的东西——CSS里的filter和backdrop-filter，这两个家伙能让你的网页瞬间变得高大上，背景模糊、颜色叠加，各种骚操作信手拈来。准备好，咱们要开车了！
第一站：filter——网页元素的“美颜相机”
filter属性，顾名思义，就是给元素添加各种各样的滤镜效果。它就像一个万能的“美颜相机”，能让你的元素瞬间变得更有艺术感。
-
语法：
element { filter: filter-function(value); }这里的
element就是你要美颜的元素，filter-function是各种滤镜函数，value是滤镜函数的参数。 -
常用的滤镜函数：
滤镜函数 功能 示例 blur()模糊效果，参数是模糊的半径（像素）。 filter: blur(5px);brightness()亮度调整，参数是百分比或数字。 filter: brightness(150%);contrast()对比度调整，参数是百分比或数字。 filter: contrast(200%);grayscale()灰度效果，参数是百分比（0%到100%）。 filter: grayscale(100%);hue-rotate()色相旋转，参数是角度（deg）。 filter: hue-rotate(90deg);invert()反相效果，参数是百分比（0%到100%）。 filter: invert(100%);opacity()透明度调整，参数是百分比或数字（0到1）。 filter: opacity(0.5);saturate()饱和度调整，参数是百分比或数字。 filter: saturate(200%);sepia()怀旧效果，参数是百分比（0%到100%）。 filter: sepia(100%);drop-shadow()阴影效果，参数是水平偏移、垂直偏移、模糊半径、颜色。 filter: drop-shadow(5px 5px 5px black); -
实战演练：
-
模糊图片：
<img src="image.jpg" class="blurred-image">.blurred-image { filter: blur(10px); }这段代码会让图片看起来像被打了马赛克，保护了你的隐私（误）。
-
黑白照片：
<img src="image.jpg" class="grayscale-image">.grayscale-image { filter: grayscale(100%); }瞬间回到旧时光，文艺范儿十足。
-
调整亮度：
<img src="image.jpg" class="bright-image">.bright-image { filter: brightness(150%); }如果你的照片太暗，可以用这个属性来“提亮肤色”。
-
阴影效果：
<div class="shadowed-box">这是一个带阴影的盒子</div>.shadowed-box { width: 200px; height: 100px; background-color: #eee; filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); }让盒子看起来更有立体感。
-
-
多个滤镜叠加：
filter属性可以同时使用多个滤镜函数，用空格隔开即可。.fancy-image { filter: blur(5px) brightness(120%) contrast(150%); }这样就能组合出各种各样的效果，尽情发挥你的想象力吧！
-
注意事项：
filter属性会影响元素的性能，特别是模糊效果，尽量不要滥用。- 不同浏览器对
filter属性的支持程度可能不同，需要进行兼容性处理。
第二站：backdrop-filter——背景的“魔法棒”
backdrop-filter属性，顾名思义，就是给元素后面的背景添加滤镜效果。它就像一个魔法棒，能让你的背景瞬间变得更加梦幻。
-
语法：
element { backdrop-filter: filter-function(value); }和
filter属性类似，element是你要添加效果的元素，filter-function是各种滤镜函数，value是滤镜函数的参数。 -
常用的滤镜函数：
backdrop-filter属性支持的滤镜函数和filter属性基本相同，包括blur(),brightness(),contrast(),grayscale(),hue-rotate(),invert(),opacity(),saturate(),sepia()。 -
实战演练：
-
模糊背景：
<div class="container"> <div class="content"> <h1>标题</h1> <p>内容</p> </div> </div>.container { width: 100%; height: 500px; background-image: url("background.jpg"); background-size: cover; position: relative; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */ backdrop-filter: blur(10px); }这段代码会让
content元素后面的背景变得模糊，营造出一种朦胧美。 -
毛玻璃效果：
毛玻璃效果是
backdrop-filter最经典的应用场景之一。<div class="container"> <div class="glass-effect"> <h1>毛玻璃效果</h1> <p>内容</p> </div> </div>.container { width: 100%; height: 500px; background-image: url("background.jpg"); background-size: cover; position: relative; } .glass-effect { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */ backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); /* 白色边框 */ }通过半透明背景和模糊效果的叠加，就能轻松实现毛玻璃效果。
-
颜色叠加：
<div class="container"> <div class="color-overlay"> <h1>颜色叠加效果</h1> <p>内容</p> </div> </div>.container { width: 100%; height: 500px; background-image: url("background.jpg"); background-size: cover; position: relative; } .color-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: rgba(255, 0, 0, 0.3); /* 半透明红色背景 */ backdrop-filter: brightness(150%) saturate(200%); }通过调整亮度和饱和度，可以让背景颜色更加鲜艳。
-
-
backdrop-filter: none;：如果你想取消
backdrop-filter效果，可以将其设置为none。.element { backdrop-filter: none; } -
注意事项：
backdrop-filter属性需要元素具有position: fixed、position: absolute或position: relative，并且设置了background-color或background-image才能生效。backdrop-filter属性会影响元素的性能，特别是模糊效果，尽量不要滥用。- 不同浏览器对
backdrop-filter属性的支持程度可能不同，需要进行兼容性处理。
第三站：图层混合特效（mix-blend-mode和background-blend-mode）——色彩的魔术师
图层混合特效，顾名思义，就是将两个或多个图层按照某种规则进行混合，产生各种奇妙的色彩效果。CSS提供了两个属性来实现图层混合特效：mix-blend-mode和background-blend-mode。
-
mix-blend-mode：mix-blend-mode属性用于指定元素的内容应该如何与它的父元素的背景混合。它就像一个色彩的魔术师，能让你的元素瞬间变得与众不同。-
语法：
element { mix-blend-mode: blend-mode-value; }这里的
element是你要添加混合效果的元素，blend-mode-value是各种混合模式的值。 -
常用的混合模式：
混合模式 功能 normal默认值，正常混合。 multiply正片叠底，将颜色值相乘。 screen滤色，将颜色值反相相乘。 overlay叠加，亮的部分更亮，暗的部分更暗。 darken变暗，选择较暗的颜色。 lighten变亮，选择较亮的颜色。 color-dodge颜色减淡，使颜色更亮。 color-burn颜色加深，使颜色更暗。 hard-light强光，叠加或滤色，取决于源颜色。 soft-light柔光，比强光更柔和。 difference差值，计算颜色值的差异。 exclusion排除，与差值类似，但对比度更低。 hue色相，使用源颜色的色相，目标颜色的饱和度和亮度。 saturation饱和度，使用源颜色的饱和度，目标颜色的色相和亮度。 color颜色，使用源颜色的色相和饱和度，目标颜色的亮度。 luminosity亮度，使用源颜色的亮度，目标颜色的色相和饱和度。 -
实战演练：
<div class="container"> <img src="image.jpg" class="blended-image"> </div>.container { width: 500px; height: 300px; background-color: red; } .blended-image { width: 100%; height: 100%; mix-blend-mode: multiply; }这段代码会将图片和红色背景进行正片叠底混合，产生一种特殊的色彩效果。
-
注意事项：
mix-blend-mode属性会影响元素的性能，尽量不要滥用。- 不同浏览器对
mix-blend-mode属性的支持程度可能不同，需要进行兼容性处理。 mix-blend-mode属性需要元素具有背景颜色或背景图片才能生效。
-
-
background-blend-mode：background-blend-mode属性用于指定元素的背景图片应该如何相互混合。它能让你轻松实现各种复杂的背景效果。-
语法：
element { background-blend-mode: blend-mode-value; }这里的
element是你要添加混合效果的元素，blend-mode-value是各种混合模式的值，和mix-blend-mode一样。 -
实战演练：
<div class="container"></div>.container { width: 500px; height: 300px; background-image: url("image1.jpg"), url("image2.jpg"); background-size: cover; background-blend-mode: screen; }这段代码会将两张背景图片进行滤色混合，产生一种梦幻般的背景效果。
-
注意事项：
background-blend-mode属性需要元素具有多个背景图片才能生效。background-blend-mode属性会影响元素的性能，尽量不要滥用。- 不同浏览器对
background-blend-mode属性的支持程度可能不同，需要进行兼容性处理。
-
第四站：综合应用——打造炫酷的网页效果
现在，让我们将filter、backdrop-filter、mix-blend-mode和background-blend-mode这四个属性结合起来，打造一些炫酷的网页效果。
-
毛玻璃背景 + 颜色叠加 + 图层混合：
<div class="container"> <div class="glass-effect"> <h1>炫酷标题</h1> <p>内容</p> </div> </div>.container { width: 100%; height: 500px; background-image: url("background.jpg"); background-size: cover; position: relative; } .glass-effect { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: rgba(255, 0, 0, 0.3); /* 半透明红色背景 */ backdrop-filter: blur(10px); mix-blend-mode: overlay; border: 1px solid rgba(255, 255, 255, 0.5); /* 白色边框 */ }这段代码会将毛玻璃效果、颜色叠加和图层混合结合起来，产生一种非常独特的视觉效果。
-
动态滤镜效果：
可以通过JavaScript来动态改变
filter和backdrop-filter属性的值，实现一些动态的滤镜效果。<img src="image.jpg" id="dynamic-image"> <button id="blur-button">模糊</button>#dynamic-image { width: 300px; height: 200px; }const image = document.getElementById('dynamic-image'); const blurButton = document.getElementById('blur-button'); blurButton.addEventListener('click', () => { image.style.filter = 'blur(5px)'; });点击按钮后，图片会变得模糊。
总结：
filter、backdrop-filter、mix-blend-mode和background-blend-mode这四个属性是CSS中非常强大的工具，它们能让你轻松实现各种各样的视觉效果。但是，也要注意它们的性能问题，尽量不要滥用。希望今天的讲座能对你有所帮助，咱们下期再见！
最后，别忘了多多练习，熟能生巧！加油！