css毛玻璃效果

最新推荐文章于 2024-06-29 16:08:06 发布

shidaping

最新推荐文章于 2024-06-29 16:08:06 发布

阅读量668

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/shidaping/article/details/73732518

版权

web前端专栏收录该内容

49 篇文章 0 订阅

订阅专栏

毛玻璃效果即是背景虚化效果，在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.效果图如下：

shidaping

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css毛玻璃效果

毛玻璃效果即是背景虚化效果，在css中用blur实现。 .blur { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); filter: progid: DXImageTransform.Microsoft.B
复制链接

扫一扫

专栏目录