记录:CSS3 模糊效果

html-css012

记录:CSS3 模糊效果,第1张

最近在写活动页面遇到一个效果,在黑色透明蒙层后面的元素要有模糊,毛玻璃的效果,最初想到的就是 filter: blur(2px) ,直接在元素上使用,但是整个子元素都被模糊了,而且蒙层的背景并没有效果,经过百般搜索和尝试,发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果,而且还不会影响到子元素的展示,它就是 backdrop-filter: blur(3px) ,完美的实现了设计稿的要求。

下面就来看看这两个属性的区别,遇到的问题以及解决方案。

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。

想要模糊图像或者某个不带透明度的元素,可以直接在元素上加 filter: blur(2px) ,如果这个元素下面有子元素,这样写子元素也会被模糊,解决方法是使用伪元素加定位效果实现:

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素 背后 的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

所以给蒙层的后面添加模糊的效果,可以直接在蒙层元素上使用 backdrop-filter: blur(2px)即可。

这两个属性的使用可以详细的参考 mdn上的描述:

backdrop-filter

filter

一、高斯模糊是使用ps等工具实现的,方法如下(以ps为例):

1、在ps中打开背景图;

2、点击菜单栏中的滤镜;

3、点击模糊,再选择高斯模糊,如图;

5、通过调整半径来调整模糊的强度(半径越大越模糊),如图:

二、全屏显示的css代码:

.bg {

   background-image:url(scale.jpg)

   -moz-background-size: 100% 100%/*  Firefox 3.6 */

   -o-background-size: 100% 100%/* Opera 9.5 */

   -webkit-background-size: 100% 100%/* Safari 3.0 */

   background-size: 100% 100%/*  Firefox 4.0 and other CSS3-compliant browsers */

   -moz-border-image: url(scale.jpg) 0/* Firefox 3.5 */

   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale')/* for <ie9 */

}