Javascript 通过父Div透明到祖父母Div背景在HTML文档的图像背景中间有一个包装DIV类=“包装器”。在该div的顶部还有另一个class=“inner”。如何使内部div透明，以便它穿过其父div，我们最终可以看到实际的背景图像 <body> <image style="height:100%; "/> <div class="wrapper" style="background:green;"> <div class="inner"> </div> </div> </body>_Javascript_Html_Css

Javascript 通过父Div透明到祖父母Div背景在HTML文档的图像背景中间有一个包装DIV类=“包装器”。在该div的顶部还有另一个class=“inner”。如何使内部div透明，以便它穿过其父div，我们最终可以看到实际的背景图像 <body> <image style="height:100%; "/> <div class="wrapper" style="background:green;"> <div class="inner"> </div> </div> </body>

javascript html css

Javascript 通过父Div透明到祖父母Div背景在HTML文档的图像背景中间有一个包装DIV类=“包装器”。在该div的顶部还有另一个class=“inner”。如何使内部div透明，以便它穿过其父div，我们最终可以看到实际的背景图像 <body> <image style="height:100%; "/> <div class="wrapper" style="background:green;"> <div class="inner"> </div> </div> </body>,javascript,html,css,Javascript,Html,Css,下面是codepen内部的一个示例：如何使粉红色div透明，以便我们可以看到实际的背景图像而不是绿色div 我只想提到，包装器div是一个React视频播放器，而内部div是一个滑块库。当组件未悬停且视频播放器未激活时，内部div将是透明的，但不会在下面显示禁用的视频播放器，而是在背景上显示主图像编辑：我通过使用clip path:polygon（）和physicali在包装器内绘制深色的形状，内部容器的空间保持不变，这样内部形状可以是透明的，并且可以穿透背景。不幸的是，目前在CSS中还

下面是codepen内部的一个示例：

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

我只想提到，包装器div是一个React视频播放器，而内部div是一个滑块库。当组件未悬停且视频播放器未激活时，内部div将是透明的，但不会在下面显示禁用的视频播放器，而是在背景上显示主图像

编辑：

我通过使用clip path:polygon（）和physicali在包装器内绘制深色的形状，内部容器的空间保持不变，这样内部形状可以是透明的，并且可以穿透背景。不幸的是，目前在CSS中还没有简单的方法来实现这一点，这是令人遗憾的，因为就布局而言，它可以提供一个全新的可能性世界

只需设置

不透明度

样式属性：

不能通过在元素上放置另一个透明元素来使其透明。但是您可以删除其中一个元素，并为透明元素提供一个边框，以提供相同的外观

CSS:

HTML:

这取决于绿色div包含的内容。最简单的方法是删除“wrapper”div，并在实际应用程序的“inner”上应用一个大而肥的绿色边框，wrapper div在悬停时实际上成为一个React播放器，显示视频，而inner wrapp在悬停时成为一个光滑的滑块。如果不悬停，我想通过这个div看到背景，所以边框不是我想要的，如果我给内部div添加不透明度，它会变得更绿，因为它的直接父背景颜色是绿色，我不想这样。我想看到背景图像的一部分，而不是包装。我对文章做了一点编辑，使它更清晰。正如我提到的，包装器div是React播放器组件，而内部div是Gallery Slider。当鼠标悬停时，滑块用于播放图像幻灯片，但在其他情况下，它是透明的，并显示背景图像。好的，但实际上，组件/元素是什么并不重要，您不能通过在不透明元素上放置透明元素来强制不透明元素失去不透明度。不透明度与CSS不一样。

body{
    width:100%;
    height: 100%;
    overflow:hidden;
}

.back-image{
    height: 100%;    
}


.wrapper{
    position: absolute;
    z-index: 1;
    left:50%;
    top:50%;
    width:200px;
    height: 200px;
    border: 100px solid green;
    background: transparent;
    transform: translateX(-50%) translateY(-50%);
    display:grid;
    justify-content: center;
    align-items: center;
}

<body>
    <div class="back-image">
        <img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"
        alt="">
        <div class="wrapper"></div>             
    </div>
</body>