如果子 DIV 的任何部分位于父 DIV 的区域之外且没有溢出，则将其设为不透明：隐藏

Question

我在另一个 div 中有一个 div，内部 div 可以由用户调整大小。

目前，如果他们放大它的大小，那么它会完全覆盖外部 div，除非我使用溢出：隐藏但他们再也看不到内部 div 的外边缘。

理想情况下，如果 innerdiv 到达父outerdiv 的边界之外，我希望所述边界之外的任何东西看起来都不同，理想情况下只是一个不透明度设置。

基本上我正在寻找类似的东西

overflow:opacity .3;

目前我只有一个隐藏或未隐藏的设置被切换，但这并不理想。

这就是将 innerdiv 设置为红色时的样子。 外部div 之外的innerdiv 的任何部分都是不透明的。 （粉红色和红色元素是同一个div。全红色部分是父/外div的边界。）

我在下面有一个不工作的例子。

我对其他设置方式持开放态度，但如果可以通过下面的配置完成，那将是理想的。

我也可以用 javascript/jQuery 来做这件事。

 .frame { width:200px; height:200px; margin-left:auto; margin-right:auto; display;block; margin-top:30px; } .outerdiv { width:200px; height:200px; background:gray; border:solid 1px #C0C0C0; } .innerdiv { width:240px; height:240px; position:absolute; background:red; margin-left:-20px; margin-top:-20px; opacity:.2 }

 <div class="frame"> <div class="outerdiv"> <div class="innerdiv"> </div> </div> </div>

Answer 1

因为innerdiv有一个绝对位置，所以它在outer div之外。 如果外部 div 有一个相对位置，那么内部 div 就不能离开它。

Answer 2

您可以使用混合混合模式，框架更大且背景为白色。

为了说明这个想法，这个相当简单的片段在内部元素上使用了一种混合混合模式，它与框架的白色背景混合以产生一种青色，并与外部的黑色混合以产生实际的红色。

mix-blend-mode 有几种不同的组合。 （我承认我从来没有找到一种很好的方法来确切地知道每个人会提前产生什么效果并且总是最终进行实验）。

 .frame { width: 100vw; height: 100vh; margin-left: auto; margin-right: auto; display: inline-block; margin-top: 30px; position: relative; background: white; } .outerdiv { width: 200px; height: 200px; background: black; border: solid 1px #C0C0C0; margin-top: 20px; margin-left: 20px; } .innerdiv { width: 240px; height: 240px; position: absolute; background: red; margin-left: -20px; margin-top: -20px; mix-blend-mode: difference; }

 <div class="frame"> <div class="outerdiv"> <div class="innerdiv"> </div> </div> </div>