Question

HTML文档中图像背景的中间有一个包装器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中还没有简单的方法，这很可悲，因为就布局而言，它可以提供一个全新的可能性。

Answer 1

只需设置opacity样式属性：

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

Answer 2

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

https://codepen.io/jaredroder/pen/YzzYqLZ

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

HTML：

<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>

从父级div到祖父母div背景透明的div

2 个答案: