使div的映射部分透明

Question

我想在上面的图片中只用2 divs和img制作类似的内容。我实际上做了上面的那个，但我必须使用大约6 divs。

是否有办法使用CSS或JavaScript使父div的映射区域透明。

NB：中间方格div可以拖动并调整大小。

Answer 1

我在这个片段中使用了三个div：背景图像div，背景叠加（用于色调）和裁剪区域。

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

＆＃13;

＆＃13;

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);

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;