远方的海
远方的海,WordPress,免费
2015 Sep 07 18 : 31

CSS实现图片模糊效果(毛玻璃特效)

您当前的位置: 首页 > 建站资源 > 前端 > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

图片模糊效果,也就是我们常说的毛玻璃特效。其实,实现起来也是非常简单,我们来看看这个特效的效果如何?下面的图片就是一张普通的图片加上了模糊效果。是不是看起来很有几分苹果范?

图片实现模糊效果

这张背景图片就是加上了模糊效果的图片。

CSS实现图片模糊效果(毛玻璃特效)

我们再来看看原图长什么样子吧,喏,这就是这张背景图片的原图,一张水彩插画。也是本站的默认随机图片之一。

原图对比

小小的图片加上了模糊效果,显得非常有Feel,我们就来看看这个效果怎么实现的吧!

Blur模糊效果实现

先给需要加上模糊毛玻璃效果的图片加上一个class="blur"的属性。根据里面的px值可以调节图片模糊的程度,一般10px就够了。

.blur{
-webkit-filter: blur(30px);
-moz-filter: blur(30px);
-ms-filter: blur(30px);
filter: blur(30px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=30, MakeShadow=false)
}

把以上代码放入主题的style.css中,这样图片就会加上blur模糊特效了。特效除了Chrome,Firefox,Opera,Safari等高级浏览器外,还支持IE6-9浏览器。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:前端

您可能也会喜欢

发表回复

Post Comment


  1. 助推博客 :

    这个效果挺好看

    2015-9-13
  2. 陌小雨 :

    这评论弹出有点意思哈,很不错的效果,等我好好处理了网站上的图片,我要好好折腾下这个功能。

    2015-9-13
    • Sven水神 :

      这个是仿制Gmail的,你可以818谷歌的样式~~~

      2015-9-13
  3. Timle.CN :

    我觉得还是把css文件放在头部加载比较好,现在这样每开一个页面都先出来一堆文字,然后在刷新样式。感觉体验很不好,其实css文件放头部并不会对速度有太大的影响。

    2015-9-8
    • Sven水神 :

      好吧,我放回去。

      2015-9-8