Question

有什么办法可以使包装盒不显示粉红色？那是不是方框内的所有区域都显示出身体的蓝色？理想情况下，解决方案不是在盒子周围制作四个粉红色div，而是使用现有的div。使用z-index也许有些棘手？我还需要它来显示实际的身体背景。将框的背景颜色更改为蓝色将不起作用。谢谢。

body {
  background-color: azure;
}

#pink {
  position: absolute;
  width: 95%;
  height: 100px;
  background-color: pink;
  z-index: -1;
}

#box {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 45%;
  border: 1px dotted black;
  background-color: none;
  z-index: 1;
}

<div id='pink'></div>
<div id='box'></div>

Answer 1

如上所述，实现这一目标的唯一方法是给它background-color: inherit。

属性z-index绝不会在<body />标记后放置任何内容，因为它位于DOM中层次结构的上方。

您希望每当盒子位于粉红色右侧上方时都能看到它吗？

Answer 2

您可以使用background-color:inherit属性，因为它将继承自具有天蓝色背景的父亲元素。

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

透明的盒子可以切穿后面的盒子

2 个答案: