gpt4 book ai didi

javascript - 通过父 div 到祖 parent div 背景的 div 透明

转载 作者:太空宇宙 更新时间:2023-11-04 05:46:31 27 4
gpt4 key购买 nike

在HTML文档的图片背景中间有一个wrapper div class="wrapper"。在那个 div 之上还有另一个 class="inner"。如何让内层div透明,让他切穿他的父div,我们终于可以看到真正的背景图了?

<body> 
<image style="height:100%; "/>
<div class="wrapper" style="background:green;">
<div class="inner">
</div>
</div>
</body>

这是codepen中的一个例子: https://codepen.io/kenshin30/pen/JjjMGbm

如何使粉红色的 div 透明以便我们可以看到实际的背景图像而不是绿色的 div?

我只想提一下,包装器 div 是 React Video Player,内部 div 是 Slider Gallery。当组件未悬停且视频播放器未激活时,内部 div 是透明的,但不会在下方显示禁用的视频播放器,而是在背景上显示主图像。

编辑:我设法通过使用 clip-path: polygon() 来解决这个问题,并在包装​​纸内物理绘制变暗的形状,内部容器的空间未成形,因此内部形状可以是透明的并切入背景。不幸的是,目前在 CSS 中没有简单的方法来实现这一点,这很可悲,因为就布局而言,它可以提供一个全新的可能性世界。

最佳答案

只需设置 opacity 样式属性:

<body> 
<image style="height:100%; "/>
<div class="wrapper">
<div class="inner" style="opacity:0.5">
</div>
</div>
</body>

关于javascript - 通过父 div 到祖 parent div 背景的 div 透明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58663477/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com