CSS3实现“红包照片”模糊效果

Posted 蓝桥云课精选

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3实现“红包照片”模糊效果相关的知识,希望对你有一定的参考价值。


废话就不多说了,直接上代码看看怎样实现“红包照片”的模糊效果吧:


模糊效果实现方法:

想让图片有模糊的效果,我们会想到 CSS3 里的滤镜属性 filter。该属性能像 photoshop 一样处理得到很多的效果,常常用于处理图片,DOM 元素和 video 等也能使用,而且已被大多数现代浏览器支持。


filter 有许多值,这里先介绍要让图片模糊必不可少的一个值 blur(),这是设置高斯模糊,也就是将一个像素点重设为周围像素点的平均值;参数值越大,即周围的范围越大,也就越模糊;参数可设置为像素单位,不接受百分比值;


如 filter: blur(5px)


选一张图片,设置其 filter 属性,对比图如下:

CSS3实现“红包照片”模糊效果


这样就大致实现了毛玻璃的模糊效果,这个大致就说明还是和理想有一点点差距,仔细看看效果会发现有几个问题:


  1. 超出图片也被模糊了,尤其是背景色和图片颜色反差很大更容易发现这个模糊化的边缘;

  2. 图片边缘内部,很窄的部分是接近透明的,会漏出背景的颜色;


消除模糊边缘


问题一可以通过以下两个方法解决:


  1. 在图片外部加一层容器,容器的宽高与图片一致,设置容器样式为 overflow: hidden; 即可去除边缘模糊;

  2. 也可以直接在图片元素上使用 clip: rect(top, right, bottom, right); 剪裁出一个矩形,需要注意剪裁的元素必须为绝对定位的元素,即需要同时设置 position: absolute;


消除透明边缘


问题二的产生是由于高斯模糊算法,使得图片边缘接近透明,也可理解为图片被剪了一圈。blur() 参数的值越大,越明显,也因此会漏出背景颜色。


解决方式如下:


图片外部添加一层容器,宽高和图片一致,同时设置相同的图片作为容器的背景图,这样漏出来的就是容器里的背景图。


实例代码:

// html 结构<div class='container'>
    <div class='blur'></div>
</div>// CSS 样式(展示重点部分).container {
    width: 300px;
    height: 300px;
    background-image: none;
    background-repeat: no-repeat;
    overflow: hidden;
}
.blur {
    width: 300px;
    height: 300px;
    background: inherit; /*继承父级元素样式*/
    -webkit-filter: blur(10px);
    filter: blur(10px);
}


这样透明边漏出部分也是图片内容,虽然没有模糊效果,但效果更好了。如果你追求完美,还可以将模糊层扩大几个像素,超出容器,控制位置即可。


修改之前的代码:

// 相同部分代码已省略(即省略号部分).container {
    position: relative;
    ... 
}
.blur {
    width: 320px;
    heighth: 320px;
    position: absolute;
    top: -10px;
    left: -10px;
    ...
}


只是完成了图片的模糊,对比 ios7 上的毛玻璃效果可能不是完全一样,感觉缺少一点质感,这里再提出 filter 属性的两个值:


  • brightness() - 设置元素亮度,值越大越亮,为百分比参数;

  • contrast() - 设置元素对比度,值越大对比越明显,为百分比参数;


这里列出一个通过调试、对比,很像毛玻璃效果的参数值:

filter: blur(8px) brightness(1.4) contrast(0.4);


下面是处理前后的对比图:

CSS3实现“红包照片”模糊效果


以上内容全部截选自实验楼课程【CSS3实现“红包照片”模糊效果】


上面详细的介绍了怎样用CSS3实现“红包照片”的模糊效果,这是整张照片的模糊处理,当然也是可以实现图片的局部模糊处理的。如果你感兴趣,可以学习实验楼相关课程:


课程名称:


【CSS3实现“红包照片”模糊效果】


课程简介:


该实战项目课程,首先介绍了使图片模糊的基础技巧,能够将整张图片模糊处理,达到毛玻璃的效果;接着拓展介绍了两种方式来实现图片局部模糊处理的效果。


整张图片模糊效果:


CSS3实现“红包照片”模糊效果


上图中的第一张图片是原始图片,最后一张是完成后的效果图,是不是很赞,中间三张是处理到每个阶段的效果图~


局部图片模糊效果:


CSS3实现“红包照片”模糊效果


关于局部照片的模糊处理方法,点击“阅读原文”即可查看在线课程文档~


推荐你使用PC访问实验楼网站,在线学习该课程,不但有课程文档介绍引导开发,更有如下图所示的在线开发环境,让你随时动手操作学习,遇到不懂的问题也可以及时交流提问~


在线环境:




以上是关于CSS3实现“红包照片”模糊效果的主要内容,如果未能解决你的问题,请参考以下文章

canvas实现的红包照片自适应效果

记录:CSS3 模糊效果

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

转css3实现ios7“毛玻璃”模糊效果

CSS3图片模糊切换效果

css3毛玻璃模糊效果