有沒有一種方法可以使帶有動態放置的“孔”的半透明div

Question

我正在創建一個包含兩層的頁面：圖像層和位於其上的半透明的“蒙版”層。 我想在該蒙版中動態放置一個小的矩形“孔”，以便可以在該區域看到其下方的原始圖像。

這可能嗎？

最終目的a是創建一種變灰圖像，當鼠標懸停在某些高溫區域時，這些區域將變為“生動”的效果。 不幸的是，這些區域不是連續的，創建補全的div並不是太容易。

謝謝！ 阿米特

Answer 1

這樣的事情？

http://deepliquid.com/projects/Jcrop/demos.php

Answer 2

好的，這是我找到的一種解決方案。 創建具有相對位置的包裝器div（以捕獲高溫區域的絕對位置）。 將圖像放在底層。 在中間層放置一個半透明的div。 將所有這些“熱區域” div（“孔”）放在頂層（絕對位置），不帶背景（完全透明）。 然后，對於熱點區域的：hover偽類，使用與底層圖像相同的背景圖像，並將背景位置設置為-left -top（div絕對位置的負數）。

這將產生所需的效果，即，將鼠標懸停在“熱區域”上時，會顯示帶有一部分原始圖像的變灰圖像。

我唯一的希望是，它不會在很多div上設置400K圖像的背景定位時提高瀏覽器性能（我有大約50個）。