溢出未隐藏，但不透明度改变

overflow not hidden but opacity changed

本文关键字：不透明度 改变 隐藏 溢出      更新时间：2023-09-26

是否可以使溢出不隐藏，而只是改变溢出内容的不透明度?

所以，在父div之外的内容部分的不透明度为0.5，但留在父div中的部分是正常的?

这将需要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>

请允许我跳出思维定势。为什么，而不是应用不透明度，你不覆盖你的图片与半透明…像这样:

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

它可能有点粗糙，但它可以工作，只有css。看看更新后的小提琴

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

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

我的建议是包括2张图片:

  • overflow: hidden;图像。这将像你在演示中一样工作。
  • opacity: 0.5镜像。这是将显示在父元素外部的图像。事实上，为了显示在父元素之外，它必须是:父元素的兄弟。

这样，你可以让父级的内部区域显示overflow: hidden;，父级的外部区域显示opacity: 0.5。

如果采用这种方法，我建议将所有事件处理程序保持在稍微不透明的一个上，因为这将使始终在顶部，即使图像完全在框架之外!

小提琴来了

您可以通过使用相同图像的absolutediv，使用较少的opacity和较少的z-index来实现类似的效果，并且它会随着您的图像移动而移动，使用start stop和drag函数。

看这个例子，有时可能会有一些延迟，但这是一个概念的证明。

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

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

相关文章：