css filter:blur实现毛玻璃效果

核心:让毛玻璃的元素层级低于放置在上面的元素

效果图:

代码示例:

body {
    
    
	 /* background: #000; */
	 /* background: linear-gradient(90deg, hsl(199, 98%, 50%), hsl(199, 98%, 38%)); */
	 /* background-color: #ebecf0; */
	 background-image: url(https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=);
	 font-family: 'Lobster', cursive;
	 perspective: 160vmin;
	 overflow: hidden;
}
div {
    
    
    position: relative;
    width: 30vw;
    height: 40vh;
    background: inherit;
    margin: 50px auto;
    padding: 5vmin;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, .5);
}

div::after {
    
    
      position: absolute;
      content: "";
      background: inherit; 
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      filter: blur(10px);
      z-index: 0;
  }

p {
    
    
       position: relative;
       color: #000;
       z-index: 10;
       font-size: 24px;
       line-height: 1.5;
       
   }



<div>
    <p>
        background-attachment: fixed <br />
        + <br />
        filter: bulr() <br />
        实现毛玻璃效果
    </p>
</div>