Question

大家好，我正在学习HTML和CSS，我对隐藏div背景内容或背景视图有疑问。只想显示当前的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;
    }

以下是我所得到的输出。

您可以在Image中看到其显示背景内容以及“管理个人资料”，职位名称，谁能知道我如何仅显示当前的div内容并隐藏背景内容？

我尝试应用背景色：白色，但是没有用。如果有人知道，请指导我。感谢您的任何帮助。

Answer 1

<!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属性指定元素的堆栈顺序。

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

Answer 2

尝试在div元素中使用** z-index **，

如何隐藏div的背景内容？

2 个答案: