javascript - 将文本放置在具有背景图像的响应式 div 内的特定位置

Question

我有一个反应应用程序，我正在尝试将文本放置在具有背景图像的响应式 div 中的特定位置。当我更改设备高度/宽度或放大文本时，文本不会留在正确的位置。下面的整个图表是我的背景。

我已经尝试在文本中设置相对位置和固定位置，顶部和左侧的百分比与我的 CSS 中的灰色矩形相匹配。

整个组件

  <Modal.Body>
    <Row className="textBodyHeader">
      <Col>
        <h6>PETR4, PETROBRAS PN N2 4,17</h6>
      </Col>
    </Row>
    <Row>
      <Col>
        <FormInternoCompraAgendada />
      </Col>

      <Col className="colGrafico">
        <div class="valorTotalGrafico">26,50</div>
        <div class="GainDisparoGrafico">26,50</div>
      </Col>
    </Row>
  </Modal.Body>

上面代码中带有背景图像的 div

<Col className="colGrafico">
        <div class="valorTotalGrafico">26,50</div>
        <div class="GainDisparoGrafico">26,50</div>
      </Col>

我的 CSS

.colGrafico {
  background-image: url("../img/compraAgendada.PNG");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
}

.valorTotalGrafico {
  color: #000;
  position: fixed;
  top: 55%;
  left: 97.5%;
  font-size: 2vmin;
  font-weight: 700;
}

.GainDisparoGrafico {
  color: #000;
  position: fixed;
  top: 33.3%;
  left: 130%;
  font-size: 2vmin;
  font-weight: 700;
}

主要成分。

我希望在这个 div 的这些灰色框中有五个文本 (26,50)。

标签： javascriptcssreactjsresponsive-design