CSS - 背景不透明不工作

-1

我想要一个父div填充透明背景的屏幕，但我似乎无法得到这与下面的代码工作。CSS - 背景不透明不工作

父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>

来源

2016-12-02 userMod2

您正在使用50％不透明的白色** ** 100％不透明的白色。你如何期待能够看到？ – connexo

不透明的白色会是什么样子？非常好奇想明白。 – jdmdevdotnet

你的'.outer'只有位置为absolute的子元素。它的'height：100％;'是指父元素的高度（这里是'body'），它是0. – connexo

使用VH（视高度），而不是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>

来源

2016-12-02 18:13:11 oguzhancerit

正如其他人所指出的，重叠的另一个白色元素时与白色背景上的格将无法正常工作。

但是，即使您要将.outer的颜色更改为灰色（正如我在示例中所做的那样），它仍然不会填满屏幕的整个高度。

而不是使用height: 100%，您可以查看height: 100vh填满屏幕。您可以从article了解有关vh（视口比例）的更多信息。

这里有一个工作例如：

.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>

来源

2016-12-02 18:14:04

'vw'是视口**宽**，而不是视口**高**。 – connexo

@connexo感谢您注意到错字！它已被修复。 –

时，有对孩子一个坚实的背景和.outer因为没有高度所以它不可能显示它的父div的不透明度不会实现。（因为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>

来源

2016-12-02 18:15:40 jafarbtech

你正在使用50％不透明的白色100％不透明的白色。你如何期待能够看到？

另外，您的body的计算高度为0。这使得.outer为0 100％ - 猜那是什么...

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>

来源

2016-12-02 18:18:57 connexo

CSS - 背景不透明不工作

回答

相关问题