如何创建跨浏览器兼容的“聚光灯”效果？

Question

我找到了Jquery的Spotlight插件，但它在IE中无法正常运行。

那么有没有办法让所选背景的其余部分淡化成深色，或者焦点元素保持不变？

Answer 1

我确信某处有跨浏览器解决方案。除此之外，使用固定的全屏覆盖图可能很容易实现：

.overlay
 { position: fixed;
   background-color: white; 
   opacity: 0.5; /* Add IE opacity here */
   top: 0px; right: 0px; left: 0px; bottom: 0px;
   z-index: 1000;
  }

...将其淡入，并将焦点输入元素“position：relative”和z-index设置为1001.未经测试但应跨浏览器工作。 Flash元素等会出现问题，您可以在灯箱样式的脚本中找到解决方法。

Answer 2

你可以看看jQuery Tools's Expose，这应该适用于IE 7和8.如果你想在IE 6中工作，可能需要做一些自定义才能制作格子GIF（半透明）和棋盘图案中的半灰色像素）或使用某种过滤器。