如何在半透明背景上創建透明區域（div）？

Question

我想為網頁創建一個“放大鏡”用戶界面。 鏡頭正下方頁面上的所有內容均應可見，而其他所有內容均應設為半透明。 換句話說，我想創建一個半透明的圖層（該圖層將整個頁面擋住），並在其中包含一個透明的“孔”（透鏡）。 我應該可以移動鏡頭，也可以調整鏡頭的大小。 我想到了一種解決方案，其中涉及用3x3的div覆蓋整個頁面，使所有div都是半透明的，除了中間的那一個將承載鏡頭並完全透明。 然后，我將在javascript中處理lens-div（及其周圍的其他div）的大小和移動。 我正在尋找替代的，更簡單的解決方案。

提前致謝！

Answer 1

好問題！ 考慮以下簡化的實現：

var $helperLeft = $('.helper-left'),
    $helperRight = $('.helper-right'),
    $helperTop = $('.helper-top'),
    $helperBottom = $('.helper-bottom'),

$view = $('.view').draggable({
    drag: onDrag
}),
viewWidth = $view.width(),
viewHeight = $view.height();

function onDrag(event, ui) {
    $helperLeft.css({width: ui.position.left});
    $helperRight.css({left: ui.position.left + viewWidth});
    $helperTop.css({
        width: viewWidth,
        left: ui.position.left,
        height: ui.position.top
    });
    $helperBottom.css({
        top: ui.position.top + viewHeight,
        left: ui.position.left,
        width: viewWidth
    });
}

onDrag(null, {position: $view.position()});

而已！ 非常簡短。 我認為調整大小也很簡單。

演示： http ： //jsfiddle.net/j74A9/