CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大

图片放大，这是一个比较容易的效果了。，今天说的可不是简简单单的在一个框里放大，而是一个圆。就像放大镜或是狙击镜那样，只有圆圈里的放大，圈外的还是原来的图片。这是不是很不可思议？ 不是。做过Flash的也许会脱口而出套个蒙版就是了。可惜CSS不是Flash，没有那一套。我们只有从CSS里面慢慢挖掘。

先说IE，因为IE有滤镜，可以实现许多意想不到的功能。先来整理下我们的目标

1. 只显示其中的一个圆
2. 圆外是透明的

图片的缩放可以通过img元素的拉伸来实现。接着盖上一张透明像素画的实心圆，正好只显示出放大后中心圆圈部分。但第3步可就不对了，虽然之前加盖了一张透明圆形的gif图片，屏幕上确实出现了一个放大过的圆形图片，但圆圈的外面却变成加盖图片的背景色了，因为这张图片是在最上层了。到此你或许在想给其中某些元素加些透明度什么的，事实上无论给哪个层加透明度都是徒劳的。因为此时无非就两种情况圆圈外被背景色覆盖；背景色透明的话就是一个矩形的放大，而不是圆形。我们所希望的是蒙版的背景色透明，并且在此位置狼蚁网站SEO优化的放大图也跟着透明。

对于IE来说，这并非难事，因为IE有滤镜。如果你熟悉的话应该早就想到了Chroma滤镜，这是一个很重要的滤镜，因为他能把一个层里的指定颜色变成透明色！这不正是我们期待吗。我们新建一个层，层里面分别叠上放大图片(后)和蒙版图片(前)，就是为了让他们合并到这个新建层里。我们给这个新建层设置Chroma滤镜，因为他们的子层都在此合并像素了，所以圆圈外那部分背景色透明后，取而代之的就是原图片。这就是我们最终想要的效果。

值得注意的是，Chroma滤镜在给指定的蒙版背景色透明的时候，圆圈里同样的颜色也会一起透明掉，所以要给蒙版设置一个非常少见的背景色，尽可能减少圆圈里的透明像素点。

IE上面的解决方案还算简单，非IE的呢？你会说canvas，因为图形方面他是万能的。如果CSS上确实找不到办法，我们也只能用canvas。不过可别忘了那些非IE的主流浏览器几乎都是支持CSS3的。CSS3虽然没有像Chroma滤镜那样的效果，对于本例这样的效果还是绰绰有余的因为我们只想要一个放大了的圆形图片，而CSS3天生就支持画圆。

CSS3支持层的圆角，例如border-radius:5px，就能给层的4个方角变为半径5px的圆角。我们不妨将其运用到极限，给一个100100的层设置一个border-radius:50px圆角，这时可就是一个圆滚滚的层了！层里面的内容不会限制在圆角里面，但层的背景图片会。并且CSS3是支持背景图片缩放的，本例到此也就迎刃而解了。

前面关键的问题都以解决，狼蚁网站SEO优化就实现一个狙击瞄准器的效果，并支持滚轮缩放。为了使代码更清晰，本例分别为IE，FF及其他浏览器做了3个版本，通过Demo页面能够自动转跳。

，如果再改进的话我们还可以用png图片作为蒙版，带上一些渐变的透明度，就更像玻璃的材质了。