使映射出的div部分透明

Question

我想在上面的图像中仅用2个divs和一个img来做类似的事情。 我实际上做了上面的一个，但是我必须使用大约6 divs 。

有没有一种方法可以使用CSS或JavaScript使父div的映射区域透明。

注意：中间正方形div可拖动并调整大小。

Answer 1

我在此代码段中使用了三个div：背景图像div，背景叠加层（用于着色）和裁剪区域。

裁剪区域的背景图像设置与背景图像div相同，但是背景位置设置为负div位置值。

 const cropDiv = document.querySelector(".croppedRegion"); let setCropRegion = function(x1, y1, x2, y2) { cropDiv.style.backgroundPositionX = `${-x1}px`; cropDiv.style.backgroundPositionY = `${-y1}px`; cropDiv.style.width = `${x2-x1}px`; cropDiv.style.height = `${y2-y1}px`; cropDiv.style.left = `${x1}px`; cropDiv.style.top = `${y1}px`; } setCropRegion(10, 10, 240, 240); 

 * { margin:0px; } .backgroundImg { width:250px; height:250px; background-image: url('https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG'); position:relative; } .backgroundOverlay { margin:0px; padding:0px; width:100%; height:100%; background-color:rgba(255,255,255,0.6); } .croppedRegion { width:110px; height:80px; background-image: url('https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG'); background-size:250px 250px; background-position:-80px -90px; position:absolute; top:90px; left:80px; } 

 <div class="backgroundImg"> <div class="backgroundOverlay"> <div class="croppedRegion"></div> </div> </div>