Блог

Главная - Вопросы по программированию - Как придать цвет фона дочернего элемента (прозрачный) цвету фона видового экрана или цвету фона тега body

Как придать цвет фона дочернего элемента (прозрачный) цвету фона видового экрана или цвету фона тега body

#html #css

#HTML #css

Вопрос:

У меня есть следующая разметка, и я хочу сделать div (дочерний класс) прозрачным (похожим на hole), который в этом случае должен отображать желтый цвет фона. Пожалуйста, помогите мне, как этого добиться?

 body {
  background-color: yellow;
  font-family: helvetica, sans-serif;
  margin: 4% 10%
}
.ancestor {
  width: 700px;
  height: 500px;
  background: Red;
}
.parent {
  position: absolute;
  top: 120px;
  left: 190px;
  width: 500px;
  height: 300px;
  background: Green;
}
.child {
  position: absolute;
  top: 70px;
  left: 150px;
  width: 200px;
  height: 150px;
  border: 2px solid black;
  background: transparent;
} 
 <meta name="viewport" content="width=device-width, initial-scale=1">


<div class="ancestor">
  <!-- ancestor bgcolr red -->
  <div class="parent">
    <!-- bgcolr green -->
    <div class="child">
      <!-- bgcolr transparent -->
    </div>
  </div>
</div>

`

Комментарии:

1. Вам нужно будет сделать так, чтобы у него был цвет, вы не можете указать CSS игнорировать некоторых предков.

2. вы хотите просто прозрачный или прозрачный желтый цвет?

3. На самом деле я хочу сделать отверстие в дочернем элементе, который должен отображать body bgcolor. не требуется свойство parent или ancesstor bgcolor.

4. Вы хотите child , чтобы div игнорировал parent и ancestor BG div и должен показывать BG тела? Тогда почему бы вам не присвоить желтый цвет bg «дочернему» div?

Ответ №1:

http://codepen.io/rachelreveley/pen/pEKLGj

 body {
  background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT2i8QSOCJ7aKXyZb2Rn2a_r-seI_d_pCuEFDoGxyuyC1tkQIOhmRuXae05);
  font-family: helvetica, sans-serif;
  margin: 4% 10%
}
.ancestor {
  width: 700px;
  height: 500px;
  border: 1px solid #c00;
  border-width: 120px 100px 10px 190px;
  background: transparent;
}
.parent {
  width: 410px;
  height: 370px;
  border: 1px solid #0c0;
  border-width: 120px 100px 10px 190px;
  background: transparent;
}
.child {
  width: 408px;
  height: 368px;
  border: 2px solid black;
  background: transparent;
} 
 <div class="ancestor">
  <!-- ancestor bgcolr red -->
  <div class="parent">
    <!-- bgcolr green -->
    <div class="child">
      <!-- bgcolr transparent -->
    </div>
  </div>
</div>

Ответ №2:

Вы могли бы использовать SVG-файл с отверстием в нем.

Метки: