Question

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

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

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

<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

哦。一个很酷但很棘手的想法。

据我所知，没有javascript就没有简单的方法可以做到这一点。

我的建议是包含2张图片：

overflow: hidden;图片。这将与您在演示中完全一样。
opacity: 0.5图片。这是将显示在父级之外的图像。事实上，为了显示父母之外，它必须只是：父母的兄弟。

使用此功能，您可以让父级的内部区域显示overflow: hidden;，父级的外部区域显示opacity: 0.5。

如果采用这种方法，我建议将所有事件处理程序保留在略微不透明的处理器上，因为即使图像完全位于框架之外，始终也会位于顶部！

Here's the fiddle

Answer 2

请允许我在框外思考。为什么，而不是应用不透明度，不要用半透明的东西覆盖你的图片......这样的事情：

#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。看看updated fiddle

Answer 3

你可以通过absolute div获得相似的效果，使用相同的图片，使用opacity更少z-index，并且当你移动它时，它会移动你的图像，使用start stop和drag函数。

看到这个小提琴的例子，有时可能会有一些滞后，但请将其视为概念证明。

http://jsfiddle.net/gaurav5430/vrUgs/1244/

准确： http://jsfiddle.net/gaurav5430/vrUgs/1246/

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

3 个答案: