Html css div背景颜色与图像重叠时不显示答案

【问题标题】：Html css div background color not showing when overlapping with an imageHtml css div背景颜色与图像重叠时不显示
【发布时间】：2020-04-13 23:57:35
【问题描述】：

我有 2 个 div 1 有图像，我有背景颜色为白色的内容

<div class="first-box">
<img src="assets/design.png" width="500px">
</div>

<div class="second-box">
    <div class="welcome-text" >
         <div>Create Account</div>
    </div>
</div>

这是css

.first-box{
    height: 30%;
    padding: 0;
    border-radius: 0;
    width: 100%;
}

.second-box{

    margin-top: -10%;
    height: 70%;
    background-color: white;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

正如您在第二个框中看到的那样，我使用了margin-top -10%;，因此它与第一个 div 重叠，但是当它重叠时，它的背景颜色不会显示为白色。我需要在重叠时显示背景颜色为白色。

【问题讨论】：

您可以使用 jsfiddle.net 重新创建并分享链接吗？

标签： html css

【解决方案1】：

添加位置：相对；到第二个盒子。

.second-box{
    position:relative;
    margin-top: -10%;
    height: 70%;
    background-color: white;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

【讨论】：

感谢您的快速解决

【解决方案2】：

您可以将“创建帐户”div 分开： HTML

<div class="first-box">
<img src="https://opensource.guide/assets/images/illos/legal.svg" width="500px">
</div>

<div class="second-box">

</div>

    <div class="welcome-text">
         <p>Create Account</p>
    </div>

在 CSS 中，使用 display: inline-block;只取文本的宽度：

CSS

.first-box{
    height: 30%;
    padding: 0;
    border-radius: 0;
    width: 100%;
    background-color:red;

}

.second-box{
    margin-top: -10%;
    height: 70%;
    background-color: white;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.welcome-text p{
  background-color: white;
  display: inline-block;
  overflow: visible;
}

小提琴：fiddle link

【讨论】：

【解决方案3】：

您是否尝试过在 css 中使用 z-index:9 来重叠哪个 div，因为在屏幕中只显示那些首先从底部靠近屏幕的元素，并且还使用 position realtive 和 top -10px

【讨论】：