Прозрачная коробка, которая прорезает коробку за ней - PullRequest
Новая
       28

Прозрачная коробка, которая прорезает коробку за ней

0 голосов
/ 07 марта 2019

Есть ли какой-нибудь способ, которым я могу заставить коробку не показывать розовый цвет?То есть все области внутри окна показывают синий цвет тела?В идеале решение заключается не в том, чтобы сделать четыре розовых делителя вокруг коробки, а в том, что я уже сделал.Может быть, немного сложнее, используя 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>

Ответы [ 2 ]

1 голос
/ 07 марта 2019

Как уже упоминалось выше, единственный способ как-то добиться этого - дать ему background-color: inherit.

Свойство z-index никогда не будет помещать ничего за тегом <body />, потому что оно находится выше своей иерархии в DOM.

Вы хотите, чтобы оно просвечивало всякий раз, когда над розовым квадратом справа располагалась коробка?

0 голосов
/ 07 марта 2019

Вы можете использовать свойство background-color:inherit, так как оно будет унаследовано от родительского элемента, имеющего лазурный фон. 

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