Как мы можем скрыть фоновое содержимое div? - PullRequest
Новая
       1

Как мы можем скрыть фоновое содержимое div?

0 голосов
/ 23 апреля 2019

Привет всем, я изучаю 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;
    }

Вот вывод, что я получаю.enter image description here

Как вы можете видеть на изображении, на котором отображается фоновое содержимое, а также Управление профилем, название должности Может кто-нибудь знать, как я могу показать только свой текущий div-контент и скрыть фоновый контент?

Я пытался применить фоновый цвет: белый, но он не работал. Если кто-то знает, пожалуйста, помогите мне. Заранее спасибо за любую помощь.

Ответы [ 2 ]

1 голос
/ 23 апреля 2019 

<!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 указывает порядок стека элемента.

Элемент с большим порядком стека всегда находится перед элементом с более низким порядком стека.

0 голосов
/ 23 апреля 2019

Попробуйте использовать ** z-index ** в элементе div, тот, который вы хотите сверху

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...