在子 div 上创建叠加层

Question

我正在尝试创建一个覆盖层，该覆盖层50%父宽度和100%高度。但是它不起作用，出了什么问题？

.parent {
padding: 100px 0px;
background: black;
}
.child {
width: 100%;
height: 100%;
position: relative;
padding: 0px 50px;
}
.child h1{
color: red;
}
.overlay {
width: 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.8);
}

<div class="parent">
<div class="child">
<div class="overlay"></div>
<h1>Title</h1>
</div>
</div>

白色叠加效果应出现在文本后面，宽度为.parent的一半

Answer 1

• 您希望内容相对于的元素应具有position: relative;样式。(将其添加到父项并从子项中删除(

• 您在.overlay中使用了两次width(第二个应该是height(

.parent {
position: relative;
padding: 100px 0px;
background: black;
}
.child {
width: 100%;
height: 100%;
padding: 0px 50px;
}
.child h1{
color: red;
}
.overlay {
width: 50%;
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
}

<div class="parent">
<div class="child">
<div class="overlay"></div>
<h1>Title</h1>
</div>
</div>

Answer 2

你必须玩身高100vh父母。

.parent {
width: 100%;
background: black;
height: 100vh;
}
.child {
width: 100%;
height: 100%;
position: relative;
padding: 0px 50px;
}
.child h1 {
color: red;
}
.overlay {
width: 50%;
position: absolute;
top: 0px;
left: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
z-index: 1;
}

<div class="parent">
<div class="child">
<div class="overlay"></div>
<h1>Title</h1>
</div>
</div>

Answer 3

.parent {
padding: 100px 0px;
background: black;
height:100vh;
width:100%;
}
.child {
width: 100%;
height: 100%;
position: absolute;
padding: 0px 50px;
top:0;
}
.child h1{
color: red;
}
.overlay {
width: 50vh;
position: absolute;
top: 0;
left: 0;
height: 100vh;
opacity: 0.5;
background-color: rgba(255, 255, 255, 0.8);
}

<div class="parent">
<div class="child">
<div class="overlay"></div>
<h1>Title</h1>
</div>
</div>

Answer 4

您在.overlay类中添加了两次width。我认为第二个是height.

这是你要找的吗？

.parent {
padding: 100px 0px;
background: black;
}
.child {
box-sizing: border-box;
width: 100%;
height: 100%;
position: relative;
padding: 0px 50px;
}
.child h1{
color: red;
}
.overlay {
width: 50%;
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
}

<div class="parent">
<div class="child">
<div class="overlay"></div>
<h1>Title</h1>
</div>
</div>