【深圳】DJI 大疆创新 互联网团队 前端及大量职位招聘中 (内推 15-50k + 丰厚年终 + 股份)简历请发至 evan.zhou@dji.com, 合适的话当天回复,当天内推。 更多福利

大家来找茬相信很多程序员都玩过,不是因为自己喜欢玩,而是身边的妹纸只会玩这个游戏…
那么前端er如何正确运用所学在妹纸面前装13呢?教大家一个方法。

请在30秒内找出下面两幅图的15处差别。


对,我的意思就是,多练!!!毕竟勤能补拙。
做法很简单,你只需要把他们叠加在一起,并且给处于上层的图片增加一个CSS filter。完整代码如下:

HTML

1
2
3
4
<div class='wrapper'>
<img src='http://static.w3ctrain.com/Spot_the_difference1.png' class='img img1'/>
<img src='http://static.w3ctrain.com/Spot_the_difference2.png' class='img img2'/>
<div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrapper {
position: relative;
}
.img {
padding: 0;
margin: 0;
display: inline-block;
}
.img2 {
position: absolute;
left: 0;
top: 0;

-webkit-filter: invert(100%) opacity(50%);
}

不出问题的话,你将看到下面的场景。

相同的内容都是灰色,不相同的内容凸显出来,接下来你要做的就是静静地找(zhuang)茬(13)。
所以重点全在最后的css代码-webkit-filter: invert(100%) opacity(50%);

这行代码的作用是给应用到的元素添加过滤器,过滤内容为颜色反转(255-c1),透明度变为50%,则为两种颜色的平均值(c1 + c2) / 2。所以在某点上,我们最终看到的颜色值为((255-c1) + c2)/2。于是相同颜色值的点将变成rgb(127.5,127.5,127.5)。这就是为什么大部分区域为灰色了。

注意:Firefox 34及更老版本不支持,当你可以添加兼容代码:

1
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='invert' color-interpolation-filters='srgb'><feColorMatrix color-interpolation-filters='srgb' in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 0 0.5'/></filter></svg>#invert");

为保证效果,请在Chrome中打开

本文根据 @ Franklin Ta 的文章所译,整篇译文带有我们自己的理解和意思,如果有译得不好的地方或者不对之处,还请大家指点。英文出处: Image diffing using CSS

如需转载,请注明出处: http://w3ctrain.com / 2015/10/18/image-deffing-using-css/