溢出不隐藏但不透明度改变了

Question

是否可以使溢出不被隐藏但只是改变溢出内容的不透明度？

因此,在父div之外的内容部分的不透明度为.5,但保留在父级中的部分是正常的？

这需要JavaScript我假设如果有人能让我走向正确的方向我会非常感激.在我的小提琴中你可以拖动图像. 小提琴

<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>




<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $('#img_rnd').resizable();
    $('#rnd').draggable({
        appendTo: 'body',
        start: function(event, ui) {
        isDraggingMedia = true;
    },
        stop: function(event, ui) {
        isDraggingMedia = false;
    }
});
});//]]>  

</script>


<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" />

<div id="frame">
    <div id="rnd" style="display:inline-block">
    <img id="img_rnd" style="border:1px solid red" src="http://blog.stackoverflow.com/audio/stackoverflow-300.png" />
</div>

</div>

<style>

#frame {
      height: 500px;
      width: 500px;
      overflow: hidden;
      border: 1px solid black;
}
</style>

Answer 1

请允许我跳出框框思考。为什么不应用不透明度，而是用半透明的东西覆盖图片......像这样：

#frame:after {
    content: '';
    display: block;
    position: absolute;
    background: transparent;
    z-index: 1;
    pointer-events: none;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    box-shadow: 0 0 0 5000px rgba(255,255,255,.5);
}

它可能有点 hacky，但是它可以工作，并且只需要 css。看看更新后的小提琴