Div背景色未更新

Question

我具有以下结构：

.wrapper{
        position: relative;
        margin: 20px;
    }
    #bottomBar{
        width: 100%;
        height: 100%;            
        position: absolute;
        top: 0;
        left: 0;
        z-index: -40;
    }
    #percentageText{
        position: absolute;
        z-index: 9;
        margin-top: 37px;
        left: 20px;
        background-color: red;
    }

<div class="wrapper">
<div class="ldBar"
  data-type="fill"
  style="margin: 0 auto;"
  id="bottomBar"
  data-fill-dir="ltr"
  data-path="M10 10 H 790 V 90 H 10 L 10 10 M10 10 A 5 5 0 0 0 10 90 M 790 10 a 5 5 0 0 1 0 80"
  data-fill-background="rgba(0, 0, 0, 0.0)"
  data-fill="red"></div>
      <div id="percentageText"></div>
</div>

百分比文本中的文本由有效的JS脚本控制。我想更改文本所在的div的背景但是background-color对文本的div没有任何作用。

我在做什么错？

Answer 1

为您的div设置高度和宽度，然后再次进行测试！您可以在css下面使用。

.wrapper{
        position: relative;
        margin: 20px;
    }
    #bottomBar{
        width: 100%;
        height: 100%;            
        position: absolute;
        top: 0;
        left: 0;
        z-index: -40;
    }
    #percentageText{
        position: absolute;
        z-index: 9;
        margin-top: 37px;
        left: 20px;
        background-color: red;
        height:100px;
        width:100%;
    }

<div class="wrapper">
<div class="ldBar"
  data-type="fill"
  style="margin: 0 auto;"
  id="bottomBar"
  data-fill-dir="ltr"
  data-path="M10 10 H 790 V 90 H 10 L 10 10 M10 10 A 5 5 0 0 0 10 90 M 790 10 a 5 5 0 0 1 0 80"
  data-fill-background="rgba(0, 0, 0, 0.0)"
  data-fill="red"></div>
      <div id="percentageText"></div>
</div>

Answer 2

您正在更改div #percentageText的背景颜色。

您的红色没有显示，因为div为空。尝试在#percentageText内添加一些文本，或者增加元素的宽度，颜色就会变得可见。