起因

想要实现一个毛玻璃效果，在新的项目上，于是，想到了filter属性，但尴尬的是，页面变成了下面这个样子：

目录

不要在意backdrop-filter，其影响的对象是它下层(index<this.index)的样式，此处的文字是位于div.absolute_filiter_index的下方，所以和在下面一层直接用filter拥有一致的效果。

解决方案

<html lang="en"><head>
    <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  <style type="text/css" data-vite-dev-id="C:/Users/22352/Desktop/MyTopMusicYearUpdate/htronfrpage/src/assets/main.css">/* color palette from <https://github.com/vuejs/theme> */
*{
  margin: 0;
  padding: 0;
}
html,
body{
  position: relative;
  background-image: linear-gradient(45deg, rgb(255, 255, 255), rgba(214, 219, 220));
}
.absolute_filiter_index{
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  float: left;
  backdrop-filter: blur(5px);
}</style><style type="text/css" data-vite-dev-id="C:/Users/22352/Desktop/MyTopMusicYearUpdate/htronfrpage/src/components/HelloWorld.vue?vue&amp;type=style&amp;index=0&amp;scoped=e17ea971&amp;lang.css">
h1[data-v-e17ea971] {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}
h3[data-v-e17ea971] {
  font-size: 1.2rem;
}
.greetings h1[data-v-e17ea971],
.greetings h3[data-v-e17ea971] {
  text-align: center;
}
@media (min-width: 1024px) {
.greetings h1[data-v-e17ea971],
  .greetings h3[data-v-e17ea971] {
    text-align: left;
}
}
</style></head>
  <body>
    <div id="app" data-v-app=""><!-- 模糊背景层//默认不要动 --><!-- 修改:main.css[line05->20] --> HVRIL <div data-v-7a7a37b1="" class="absolute_filiter_index"></div></div>
    <script type="module" src="/src/main.js?t=1723251802430"></script>
  

</body></html>

这样，你就可以放心的在div.absolute_filiter_index上创作了（代码不要复制使用，没有加载支持！！！）

原理

filter针对本层生效

backdrop-filter针对其下层（不包括其所在层）生效

mdn文档这样介绍：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

backdrop-filter: blur(); 高斯模糊滤镜
backdrop-filter: brightness(); 图片明亮度滤镜
backdrop-filter: contrast(); 对比度滤镜
backdrop-filter: drop-shadow(); 阴影滤镜
backdrop-filter: grayscale(); 灰度滤镜
backdrop-filter: hue-rotate(); 色相滤镜
backdrop-filter: invert(); 反转滤镜
backdrop-filter: opacity(); 透明度滤镜
backdrop-filter: sepia(); 深褐色滤镜
backdrop-filter: saturate(); 饱和度滤镜

栗子

backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

注：括号里面为他们所用的值和单位

© 版权声明
分享是一种美德，转载请保留原链接