filter或backdrop-filter实现毛玻璃

最新推荐文章于 2025-03-29 19:49:53 发布

ZzDIY

最新推荐文章于 2025-03-29 19:49:53 发布

阅读量514

点赞数

分类专栏： js训练

本文链接：https://blog.csdn.net/qq_43526925/article/details/118055348

版权

本文介绍了如何利用CSS的filter和backdrop-filter属性实现毛玻璃效果。通过练习，作者展示了这两个属性如何分别对元素本身和元素背后的区域应用模糊效果，以达到视觉上的毛玻璃视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编译器：vscode
目的：练习filter: blur()和backdrop-filter: blur()
练习项目：毛玻璃效果

介绍：
filter: CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
filter
backdrop-filter: CSS属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
backdrop-filter

filter实现的毛玻璃

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>毛玻璃2</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body {
        width: 100vw;
        height: 100vh;
      }
      .back {
        width: 100%;
        height: 100%;
        background-image: url(./images/dianpi02.jp