CSS中的blur属性可以为网页元素添加模糊效果,让网页看起来更加柔和,少了些锐利的感觉。接下来,我们将具体讲解如何使用blur属性。
.blur{ filter:blur(5px); }
上面的代码中,我们为类名为"blur"的元素添加了blur效果,模糊程度为5px。
需要注意的是,这个blur效果是可以叠加的。如果我们想要让模糊效果更明显,我们可以将blur的值调大:
.blur{ filter:blur(10px); }
如果要为不同的元素添加不同的blur效果,只需要新建不同的类名:
.blur{ filter:blur(5px); } .blur2{ filter:blur(10px); }
然后在html中为需要添加blur效果的元素添加对应class即可。
除了可以使用blur效果来模糊图像,我们还可以用它来实现毛玻璃效果:
.glass{ background-image: url("bg.jpg"); filter:blur(5px); -webkit-filter:blur(5px); background-size:cover; height:500px; position:relative; } .glass:after{ content:''; display:block; height:100%; width:100%; position:absolute; background:rgba(255,255,255,0.1); top:0; left:0; z-index:1; }
上面的代码中,我们为类名为"glass"的元素添加了毛玻璃效果。关键在于使用了属性选择器的:after伪类,在元素之后添加了一个半透明的白色div层,从而实现了这种效果。需要注意的是,使用blur属性时,如果需要在不同的浏览器之间保持兼容性,还需要加上-webkit-等前缀。