試圖遮住可移動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中執行此操作。