大父元素的透明背景

Question

我正试图应用于透明背景元素，但直接应用于grand-parent元素。例如：

body {
background: linear-gradient( 45deg, rgba(5, 175, 240, 0.14), rgba(239, 77, 54, 0.14), rgba(243, 200, 57, 0.14)) fixed
}
.parent {
height: 100px;
width: 100px;
background: black;
}
.child {
height: 50px;
width: 50px;
background: // here, i want the background to reflect the body background
}

<div class="parent">
<div class="child"></div>
</div>

Answer 1

不需要跨度，您可以使用剪辑路径CSS属性实现这一点

body {
background: linear-gradient( 45deg, rgba(5, 175, 240, 0.14), rgba(239, 77, 54, 0.14), rgba(243, 200, 57, 0.14)) fixed
}
div {
height: 100px;
width: 100px;
background: black;
clip-path: polygon(0% 50px, 50px 50px, 50px 0%, 85% 0%, 100% 0, 100% 15%, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 0 100%, 0% 85%);
}

<div>

</div>

Answer 2

对两个元素使用相同的梯度

body {
--g: linear-gradient( 45deg, rgba(5, 175, 240, 0.14), rgba(239, 77, 54, 0.14), rgba(243, 200, 57, 0.14)) fixed;
background: var(--g)
}
.parent {
height: 100px;
width: 100px;
background: black;
}
.child {
height: 50px;
width: 50px;
background: var(--g);
background-color: #fff;
}

<div class="parent">
<div class="child"></div>
</div>