图片放大了，这是现在比较容易达到的疗效。 其实我昨天讲的并不是简单的放大一个盒子，而是一个圆。 就像放大镜或者狙击镜一样，只是圆圈里面的放大倍数，而圆圈外面其实是原图。 这不是不可思议吗？ 其实并不是。 做过Flash的人似乎脱口而出：放个图层就可以了。 可惜CSS不是Flash，没有这样的设定。 我们只能从CSS中逐步挖掘。
先说IE，因为IE有过滤器，它可以实现很多意想不到的功能。 我们先来梳理一下我们的目标：
功效展示
提示：运行前可以更改部分代码
图像缩放可以通过拉伸img元素来实现。 然后用透明像素画覆盖实心圆css3背景图片放大，这样就只显示放大的中心圆部分。 但第三步就错了。 虽然之前叠加了一张透明的矩形gif图片，但屏幕上确实出现了放大的正方形图片，只不过圆圈的外面变成了叠加图片的背景色。 因为这张图在底部。 此时，您似乎正在考虑为各个元素添加一些透明度。 事实上，为该层添加透明度是徒劳的。 因为此时只有两种情况：圆的外面被背景色覆盖； 如果背景颜色是透明的，则它是圆形放大，而不是正方形。 我们想要的是：蒙版的背景色是透明的，但是针对狼蚁网站SEO优化而优化的放大图片在这个位置也是透明的。
对于IE来说，这不是问题，因为IE有过滤器。 如果你熟悉的话，你应该已经想到了色度滤镜。 这是一个非常重要的滤镜，因为它可以使图层中的指定颜色变成透明颜色！ 这不正是我们所期望的吗。 我们创建一个新图层，并将放大的图片（背面）和蒙版图片（正面）叠加在该图层的顶部，只是为了让它们合并到这个新图层中。 我们为这个新图层设置了色度滤镜，因为它们的子图层在这里都是合并像素，所以圆外部分的背景色透明后，就会替换掉原来的图像。 这就是我们最终想要的治疗效果。
值得注意的是，当Chroma滤镜使指定蒙版的背景颜色透明时，圆圈内的相同颜色也会一起透明，因此需要为蒙版设置一个极其罕见的背景颜色，并减少其中的颜色尽可能多的圈子。 透明像素。
IE 下的解决方案相当简单，非 IE 下怎么办？ 你实际上会说canvas，因为它在图形方面无所不能。 如果CSS中实在没有办法找到的话，我们就只能使用canvas了。 但别忘了，这些非IE主流浏览器几乎都支持CSS3。 CSS3似乎没有与Chroma滤镜相同的效果，但对于这个例子来说已经绰绰有余了：由于我们只想要放大的方形图像，CSS3自然支持绘制圆形。
CSS3支持图层圆角，如border-radius:5px，可以将图层的4个方角变成直径为5px的圆角。 我们不妨把它发挥到极限，给100*100的图层设置一个border-radius:50px的圆角css3背景图片放大，那么它就是一个圆形的图层了！ 图层上方的内容将不限于圆角，但图层的背景图像会。 而且CSS3支持背景图片的缩放，所以这个例子很容易解决。
以下关键问题全部解决，狼蚁网站SEO优化实现了狙击瞄准镜的效果，支持滚轮缩放。 为了让代码更加清晰，本示例针对IE、FF等浏览器做了三个版本，可以手动跳转Demo页面。
其实如果进一步改进的话，我们还可以使用png图片作为图层，带有一些渐变的透明度，更像是玻璃的材质。
