CSS - Непрозрачность фона Не работает

Question

Я хочу, чтобы родительский div заполнил экран прозрачным фоном, но я не могу заставить его работать со следующим кодом.

Родительский div отображается только как сплошной цвет.

Любые идеи, что я делаю неправильно:

.outer { 
 
    position: relative; 
 
    z-index: 1; 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
    height: 100%; 
 
} 
 
.inner { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 50px; 
 
    background-color: white; 
 
    padding: 20px; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 

 
    <h5>Search</h5> 
 

 
    </div> 
 

 
</div>

Answer 1

Используйте В.Х. (высота окна), а не высота 100%. Когда вы используете высоту 100%, она берет 100% родителя, а родителем является тело, высота которого равна 0px.

.outer { 
 
    position: relative; 
 
    z-index: 1; 
 
    background-color: rgb(255, 255, 255, 0.5); 
 
    height: 100vh; 
 
} 
 
.inner { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 50px; 
 
    background-color: white; 
 
    padding: 20px; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 

 
    <h5>Search</h5> 
 

 
    </div> 
 

 
</div>

Answer 2

Как уже отмечалось, ДИВ с белым фоном не будет работать, когда перекрытием еще один белый элемент.

Однако, даже если вы должны были изменить цвет .outer на серый (как я сделал в моем примере), он по-прежнему не заполняет всю высоту экрана.

Вместо того, чтобы использовать height: 100%, вы можете посмотреть height: 100vh, чтобы заполнить экран. Вы можете узнать больше о vh (Viewport-percent) из этого article.

Вот работа пример:

.outer { 
 
    position: relative; 
 
    z-index: 1; 
 
    background: rgba(0, 0, 0, .5); 
 
    height: 100vh; 
 
} 
 
.inner { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 50px; 
 
    background-color: white; 
 
    padding: 20px; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 

 
    <h5>Search</h5> 
 

 
    </div> 
 

 
</div>

Answer 3

непрозрачности родительского DIV в обыкновение достигается тогда, когда есть твердый фон на ребенка и .outer как никакой высоты поэтому его не представляется возможным, чтобы показать его. (из-за position:absolute)

Может быть, обратить вспять эти фоны и присвоить позицию относительно будет понятно, как это работает, как показано ниже.

Примечание: в обоих местах Даже position:absolute; имеет некоторый смысл

.outer { 
 
    position: relative; 
 
    background-color: red; 
 
    z-index: 1; 
 
    height: 100%; 
 
} 
 
.inner { 
 
    position: relative; 
 
    width: 100%; 
 
    top: 50px; 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
    padding: 20px; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 

 
    <h5>Search</h5> 
 

 
    </div> 
 

 
</div>

Answer 4

Вы используете 50% непрозрачный белый на 100% непрозрачный белый. Как именно вы ожидаете, что это станет видимым?

Кроме того, ваш body имеет вычисленную высоту 0. Это делает .outer иметь 100% 0 - угадать, что это такое ...

html, body { height: 100%; } 
 
body { background-color: #f0f0f0; } 
 
.outer { 
 
    position: relative; 
 
    z-index: 1; 
 
    background-color: rgba(200, 0, 0, 0.5); 
 
    height: 100%; 
 
} 
 
.inner { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 50px; 
 
    
 
    padding: 20px; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <h5>Search</h5> 
 
    </div> 
 
</div>