`

CSS滤镜让图片模糊(毛玻璃效果)

 
阅读更多
<img src="mm1.jpg" />
<img src="mm1.jpg" class="blur" />

 

.blur {	
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);
    
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}

 



 

 

  • 大小: 104.1 KB
分享到:
评论

相关推荐

    CSS3滤镜filter: blur,使图片或背景模糊(毛玻璃)

    在CSS3中,滤镜(filter)属性是一个强大的工具,它可以让我们对网页元素应用各种视觉效果,其中之一就是模糊效果。`filter: blur()`是CSS3滤镜功能的一部分,它允许我们轻松地为图像、背景甚至是整个元素添加模糊...

    利用 CSS 实现漂亮的毛玻璃效果

    在网页设计中,毛玻璃效果,也被称为模糊背景或模糊半透明效果,是一种流行的设计趋势,它可以为网页增添一层柔和而优雅的视觉效果。这种效果通常通过CSS来实现,能够使前景元素与背景元素之间产生良好的层次感,...

    使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法

    在前端开发中,CSS3滤镜...总之,CSS3的`filter: blur()`属性是实现毛玻璃效果的关键,结合适当的布局和设计,可以创造出优雅且富有层次感的前端界面。在实际应用中,需要根据项目需求和性能考虑进行适当调整和优化。

    HTML毛玻璃效果代码

    例如,可能有一个div元素,其背景图片通过CSS的`background-image`属性设置,并通过CSS类激活毛玻璃效果。 2. CSS文件:Cascading Style Sheets,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。...

    毛玻璃效果.zip

    总的来说,毛玻璃效果是一种增强用户界面美学的设计技巧,通过CSS3的滤镜功能可以轻松实现。尽管存在浏览器兼容性问题,但通过适当的技巧和 polyfill,我们可以让这种效果在大多数现代浏览器中都能良好地工作。

    个人引导页毛玻璃页面html源码.zip

    在网页设计中,引导页(Landing Page)常被用于吸引用户注意力、介绍产品或服务,而毛玻璃效果(也称为模糊背景或Blur Effect)则是一种流行的设计趋势,它通过在元素上应用模糊滤镜,创造出一种半透明且带有朦胧...

    blur jquery实现图片动态局部毛玻璃模糊特效

    CSS滤镜可以对元素的外观进行各种调整,包括模糊效果。在CSS中,`filter`属性允许我们应用多种滤镜,例如`blur()`函数用于创建模糊效果。但是,CSS3的模糊滤镜将整个元素模糊,而我们要实现的是局部模糊,因此需要更...

    jQuery花瓣网毛玻璃模糊背景特效.zip

    使用这个特效可以提升网站的用户体验,特别是在设计登录框、弹窗或者卡片式布局时,毛玻璃效果可以创造出优雅且现代的界面。同时,由于依赖于jQuery,开发过程相对简单,对于熟悉jQuery的开发者来说,实现这样的特效...

    利用CSS3实现毛玻璃效果示例

    实现毛玻璃效果的基本思路是将背景图片模糊处理,但是不希望文字也跟着模糊,这样会降低可读性。因此,可以在目标元素上使用::before伪元素,并将模糊效果应用于伪元素。这样做,背景图片模糊后依然能清晰地显示文字...

    html5实现毛玻璃模糊效果 Aero风格

    Aero风格源自微软Windows Vista和7的操作系统界面,以其透明和半透明的视觉元素而闻名,毛玻璃效果则是这种风格的一个标志性特征,它为用户界面增添了一种柔和、朦胧的质感。 **CSS3模糊效果** CSS3引入了滤镜...

    使用CSS3制作倾斜导航条和毛玻璃效果

    实现毛玻璃效果可以通过CSS中的filter属性,其中blur()滤镜可以应用高斯模糊效果。一般情况下,毛玻璃效果会用到伪元素来实现,需要将伪元素放置在父元素的后面,然后使用模糊滤镜,通过调整模糊的半径来控制模糊...

    CSS毛玻璃效果如何实现

    总的来说,CSS毛玻璃效果的实现并不复杂,主要通过继承背景和应用模糊滤镜实现。关键在于理解和运用CSS的`filter`属性以及适当的浏览器兼容性处理。这种效果可以增强用户界面的层次感和美学,为网站或应用增添一份...

    css实现照片模糊效果类似毛玻璃效果

    在实现毛玻璃效果中,主要使用的是一组名为“模糊滤镜”的功能。 1. **CSS滤镜**: - `filter`属性可以接受多个函数,每一个函数可以对元素应用一种视觉效果。 - `url()`函数是一种用于引用外部SVG滤镜资源的方式...

    HTML毛玻璃拟态UI个人主页.zip

    4. 图像资源:如背景图片、图标等,可能应用了毛玻璃效果。 5. 其他可能的资源文件,如字体文件或音频/视频文件,用于增强用户体验。 总的来说,HTML毛玻璃拟态UI个人主页是一个结合了现代前端技术与流行设计趋势的...

    毛玻璃拟态个人引导页HTML优化版源码源码资源下载整理.zip

    1. **毛玻璃效果**:毛玻璃,也称为模糊背景或磨砂玻璃效果,是通过CSS3的`filter`属性实现的,特别是使用`blur`和`brightness`滤镜。这种效果使背景图片变得模糊,同时保留前景元素的清晰度,增加视觉层次感。在本...

    弹框背景毛玻璃

    毛玻璃效果,也被称为模糊效果或者“Blur Effect”,在UI设计中被广泛应用,尤其是在弹框背景中,可以为用户界面增添一种优雅而现代的视觉体验。这种效果通过模糊背景图像来创造出半透明、朦胧的质感,使得弹框内容...

    毛玻璃个人引导页.zip

    在这个案例中,开发者可能会使用CSS3的新特性来实现毛玻璃效果,如滤镜(filters)。例如,`filter: blur()`可以对元素应用模糊效果,而`opacity`则可以调整透明度。同时,CSS也可能包括对布局的控制,如使用Flexbox...

    css-filter:使用css实现图片模糊效果(毛玻璃)

    css filter effect之前项目开发中遇到要把图片模糊的需求,于是google了一把,采用了`filter-blur`来做,后发现`filter`是个好家伙啊,能处理很多图片特效,不仅仅是blur(敢情浏览器是想把自己做成图片处理器了)。...

    HTML5 实现背景图片毛玻璃模糊特效.zip

    毛玻璃效果,也被称为高斯模糊或者iOS7风格的模糊效果,近年来在网页设计中变得非常流行,因为它可以为界面增添一种优雅而现代的视觉体验。 要实现这样的特效,主要涉及HTML5的Canvas元素以及CSS3的一些属性。...

Global site tag (gtag.js) - Google Analytics