试图遮住可移动div以外的所有东西

Question

我写了一个悬停缩放插件，我试图弄清楚如何遮住悬停缩放框之外的所有东西，并使缩放框本身透明，但我有一段艰难的时间试图找出我需要为此做些什么。我是否使用不透明度？我使用背景图片吗？

现在它只是在黑暗的黑色不透明bg上显示一个白色的.5不透明度，但我有点摸不着头脑。任何建议将是超级有用的。

我想要做的事：

演示：jsfiddle

Answer 1

这里有一个解决方案的例子，但它需要你做出一些改动。

如果将缩放广场设置为具有与底层图像相同的背景图像，并通过CSS调整其背景位置以使其相对于原始图像的位置为负值，那么我能正确解释它吗？

http://jsfiddle.net/moopet/Be9AA/

的重要组成部分，是

var left = Math.min(Math.max(relX - 100, 0), $origImg.width() - $zoomBox.width()), 
    top = Math.min(Math.max(relY - 100, 0), $origImg.height() - $zoomBox.height()); 

$zoomBox.css({ 
    left: left, 
    top: top 
}); 

$zoomBox.css({ backgroundPosition: (-left) + "px " + (-top) + "px" }); 

而且我已经设置在CSS的小提琴缩放要素的背景，但如果你需要为多张图片做到这一点你可以通过复制src属性在JS中执行此操作。