Html 穿过它后面的盒子的透明盒子

有没有办法让盒子不显示粉红色？也就是说，方框内的所有区域都显示身体的蓝色吗？理想的解决方案不是在盒子周围画四个粉红色的div，而是使用我已经有的div。也许使用z-index有点棘手？我还需要它来显示实际的身体背景。将框的背景色更改为蓝色将不起作用。谢谢

身体{ 背景颜色：天蓝； } 粉红的{ 位置：绝对位置； 宽度：95%； 高度：100px； 背景颜色：粉红色； z指数：-1； } 盒子{ 位置：绝对位置； 宽度：100px； 高度：100px； 左：45%； 边框：1px点黑色； 背景色：无； z指数：1； } 您可以使用background color:inherit属性，因为它将从具有azure背景的父元素继承

#box {
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: inherit;
}

---

如上所述，以某种方式实现这一点的唯一方法是为其提供背景色：inherit

属性z-index永远不会在标记后面放置任何东西，因为它位于DOM中它的层次结构之上

---

你想让它在盒子放在粉红色的上方时都能被看穿，对吗

你想在粉红色的盒子里打个洞吗？是的，所以无论什么东西穿过盒子，它都不会出现在透明的背景中。