自学前端之CSS实现毛玻璃效果

最新推荐文章于 2024-06-22 10:15:00 发布

野犬17

最新推荐文章于 2024-06-22 10:15:00 发布

阅读量3.8k

点赞数 5

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/idler123/article/details/121453884

版权

本文介绍了如何使用CSS实现毛玻璃效果，通过设置backdrop-filter属性配合blur滤镜，达到模糊背景图片的效果。在HTML中设定背景图片和卡片div，然后在CSS中应用样式，调整blur距离控制模糊程度。

摘要由CSDN通过智能技术生成

我们知道，页面中有一种非常好看的效果就是毛玻璃，我们先看一下效果图
在这里插入图片描述
接下来我们就具体实现一下这个效果
先看HTML
在body中设置一张背景图片
然后设置一个div，用来作为卡片，也是我们需要的毛玻璃的载体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

关注

专栏目录