使用CSS达成图片/背景图虚化

发表于 2022-08-13 更新于 2024-08-18 分类于技术分享本文字数： 1.1k 阅读时长 ≈ 1 分钟

来源

图片虚化

在虚化背景时使用的是 filter 属性，下面请看示范

html：

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        boby{
            background-color: rgb(255, 255, 255,0.1);
    box-shadow: 0 25px 45px rgba(0,0,0,0.1);
    backdrop-filter: blur(4px);
        }
        img{
            width: 1320px;
            height: 500px;
            filter: blur(5px);
        }
    </style>
</head>
<body>
    <img src="b.jpg" alt="背景图片">
</body>
</html>

效果如下：

背景图虚化

CSS
.content{
    background-color: rgb(255, 255, 255,0.1);
    box-shadow: 0 25px 45px rgba(0,0,0,0.1);
    backdrop-filter: blur(4px);
}

本站沿用如下：

CSS
//菜单栏设置
.header-inner {
  background-image: url(/images/4.jpg);
  background-position: center center;
  background-size: contain;
  background-position:100% 100%;
}
.menu{
  backdrop-filter: blur(5px);
  }

效果如下：

background-color: 改变背景颜色

backdrop-filter: blur (4px); 是实现虚化的关键，backdrop-filter 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

各个滤镜方法如下：