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

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

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

===============>>#1 票数: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> 

  ask by user7713452 translate from so

未解决问题?本站智能推荐: