CSS3实现“红包照片”模糊效果
最近朋友圈里的红包照片引发一次不小的“雾霾”,它是怎么实现的呢?下面YJBYS小编为大家介绍!
废话就不多说了,直接上代码看看怎样实现“红包照片”的模糊效果吧:
模糊效果实现方法:
想让图片有模糊的效果,我们会想到 CSS3 里的滤镜属性 filter。该属性能像 photoshop 一样处理得到很多的效果,常常用于处理图片,DOM 元素和 video 等也能使用,而且已被大多数现代浏览器支持。
filter 有许多值,这里先介绍要让图片模糊必不可少的一个值 blur(),这是设置高斯模糊,也就是将一个像素点重设为周围像素点的平均值;参数值越大,即周围的范围越大,也就越模糊;参数可设置为像素单位,不接受百分比值;
如 filter: blur(5px)
选一张图片,设置其 filter 属性,对比图如下:
这样就大致实现了毛玻璃的模糊效果,这个大致就说明还是和理想有一点点差距,仔细看看效果会发现有几个问题:
超出图片也被模糊了,尤其是背景色和图片颜色反差很大更容易发现这个模糊化的边缘;
图片边缘内部,很窄的部分是接近透明的,会漏出背景的颜色;
消除模糊边缘
问题一可以通过以下两个方法解决:
在图片外部加一层容器,容器的宽高与图片一致,设置容器样式为 overflow: hidden; 即可去除边缘模糊;
也可以直接在图片元素上使用 clip: rect(top, right, bottom, right); 剪裁出一个矩形,需要注意剪裁的'元素必须为绝对定位的元素,即需要同时设置 position: absolute;
消除透明边缘
问题二的产生是由于高斯模糊算法,使得图片边缘接近透明,也可理解为图片被剪了一圈。blur() 参数的值越大,越明显,也因此会漏出背景颜色。
解决方式如下:
图片外部添加一层容器,宽高和图片一致,同时设置相同的图片作为容器的背景图,这样漏出来的就是容器里的背景图。
实例代码:
// HTML 结构
// CSS 样式(展示重点部分)ainer {
width: 300px;
height: 300px;
background-image: none;
background-repeat: no-repeat;
overflow: hidden;
}
{
width: 300px;
height: 300px;
background: inherit; /*继承父级元素样式*/
-webkit-filter: blur(10px);
filter: blur(10px);
}
这样透明边漏出部分也是图片内容,虽然没有模糊效果,但效果更好了。如果你追求完美,还可以将模糊层扩大几个像素,超出容器,控制位置即可。
修改之前的代码:
// 相同部分代码已省略(即省略号部分)ainer {
position: relative;
...
}
{
width: 320px;
heighth: 320px;
position: absolute;
top: -10px;
left: -10px;
...
}
只是完成了图片的模糊,对比 ios7 上的毛玻璃效果可能不是完全一样,感觉缺少一点质感,这里再提出 filter 属性的两个值:
brightness() - 设置元素亮度,值越大越亮,为百分比参数;
contrast() - 设置元素对比度,值越大对比越明显,为百分比参数;
这里列出一个通过调试、对比,很像毛玻璃效果的参数值:
filter: blur(8px) brightness(1.4) contrast(0.4);
-
关于JavaScript中继承的深入理解
JavaScript中我们可以借助原型实现继承。例如functionbaz(){="";}functionfoo(){}otype=newbaz();varmyFoo=newfoo();;这样我们就可以访问到baz里的属性oo啦。在实际使用中这个样不行滴,由于原型的共享特点(数据保存在了堆上),所有实例都使用一个原型,一但baz的属性...
-
javascript 日期类型学习笔记
1.创建日期对象复制代码代码如下:varnow=newDate();//获得当前系统日期和时间varsomeDate=newDate(e("May25,2012"));varsomeDate=newDate("May25,2012");//与上相同varsomeDate=newDate((2010,0));//GMT时间2010年1月1日凌晨0时varsomeDate=newDate(2010,0);/...
-
关于jQuery实现鼠标单击网页文字后在文本框显示的方法介绍
本文实例讲述了jQuery实现鼠标单击网页文字后在文本框显示的方法。分享给大家供大家参考。具体实现方法如下:张三李四王五赵六选择姓名$("ulli")k(function(){vartext=$(this)();$("input")("");$("input:checked")nts("td")ings("td")dren("input")(text);})希...
-
如何理解Javascript的caller,callee,call,apply区别
在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsarguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的Function对象的名字。n:选项。要传递给Function对象的从0开始的参数值...