javascript - 设置 Overflow=visible 时如何为 div 赋予不透明度

Question

我有 1 div 和 1 image 标签，一个放在另一个上。 Div 小于 image。 我为 div 设置了 overflow=visible。我的问题是，当我将图像插入图像标签时，通过 div 溢出的内容应该是这样的 opacity=0.5。

对我来说它是这样的..任何帮助

<div style="border-style: solid; border-width: 2px; height: 5cm; width: 8cm;top: 20px; left: 20px; position: relative;  overflow: visible;" id="divimg">
  <img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" style="height: 7cm; width: 10cm;" />
</div>

Answer 1

如果您可以将 HTML 更改为这样的内容:

<div id="holder">
  <div id="overlay">          
  <img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg"  />

    </div>    
    <div id="box"></box>  

</div>

CSS:

#holder {
    width:500px;
    height:250px;
    position:relative;
    overflow:hidden;

}

#overlay {
    width:500px;
    height:250px;
    opacity:0.5;

}
#displayimg {

    width:500px;
    height:250px;

}
#box {
    width:250px;
    height:100px;
    background-color:black;
     position:absolute;
    left:200px;
    top:70px;
    overflow:hidden;

}
#box #ima {

    position:absolute;
     width:500px;
    height:250px;
    display:block;
}

还有一些 JQuery 魔法:

$('#box').append('<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="ima"  /> ');

$('#ima').offset($('#holder').offset());

$( "#box" ).draggable();

  $( "#box" ).draggable({

      drag: function() {
      $('#ima').offset($('#holder').offset());
      }

    });     

既然你提到了拖动，我已经在 fiddle 中导入了 JQuery UI: http://jsfiddle.net/y3c41d10/1/

要调整大小，您必须进行一些计算，但这是可行的，我希望...