css毛玻璃效果

最新推荐文章于 2025-10-18 12:01:39 发布

原创最新推荐文章于 2025-10-18 12:01:39 发布 · 761 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

49 篇文章

订阅专栏

毛玻璃效果即是背景虚化效果，在css中用blur实现。

<body>
  <style>
  .blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);     /* IE6~IE9 */
  }
  </style>
  <img src="./imgs/waterfall.jpg" />
  <img src="./imgs/waterfall.jpg" class="blur" />
</body>

现代浏览器使用filter即可，相素值为虚化程度，这里取5px。 ie6-ie9使用牛X的微软filter.效果图如下：