gpt4 book ai didi

reactjs - 我们如何隐藏div的背景内容?

转载 作者:太空宇宙 更新时间:2023-11-04 06:17:34 25 4
gpt4 key购买 nike

大家好,我正在学习 HTML 和 CSS 我对隐藏 div 背景内容或背景 View 有疑问。只想显示当前的 div 内容。我有 div,因为我正在显示一些内容。但是在显示时遇到一些问题。我正在显示这个 div,但它也显示背景 div 数据或内容。有人可以指导我如何隐藏 div 的背景内容。这是我的代码,实际上我在做什么。


<div className="progressBarPosition">
<span className="text-dark">File Upload</span>
<div class="progress">
<div class="progress-bar" style={{ width: `${this.props.percentage}%` }}>{this.props.percentage}%</div>
</div>
</div>

这是 css。

.progressBarPosition{
padding: 24px 27px;
color: #c5c1c1;
position: fixed;
top: 8px;
left: 308px;
right: 308px;
height: 14%;
border: 1px solid #9B9B9B;
box-shadow: 0 0 24px 7px;
border-radius: 3px;
}

这是我得到的输出。 enter image description here

正如您在图像中看到的那样,它显示背景内容以及管理个人资料、职位名称谁能知道我怎样才能只显示我当前的 div 内容并隐藏背景内容?

我尝试应用 background-color: white 但它不起作用如果有人知道请指导我。在此先感谢任何帮助。

最佳答案

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style>
#layer1, #layer2, #layer3, #layer4 {
position: relative;
}
#layer1, #layer3 {
font-size: 50px;
color: #000080;
}
#layer2, #layer4 {
top: -55px;
left: 5px;
color: #ffa500;
font-size:70px;
}
#layer1 { z-index: 2; }
#layer2 { z-index: 1; }
#layer3 { z-index: 3; }
#layer4 { z-index: 4; }
</style>
</head>
<body>
<p>Layer 1 at the top</p>
<div id="layer1">layer1</div>
<div id="layer2">layer2</div>
<p>Layer 4 at the top</p>
<div id="layer3">layer3</div>
<div id="layer4">layer4</div>
</body>
</html>

z-index 属性指定元素的堆叠顺序。

具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。

关于reactjs - 我们如何隐藏div的背景内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55806190/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com