как добавить текст поверх изображения и добавить абзац начнется в той же строке, используя html, css

Question

это ожидаемый вывод

на данный момент, я получил это как вывод

Как добавить текстовое изображение в этом сценарии и как убедиться, что фиксированная ширина и высота изображения

html код:

.circle1 {
  background-image: url(https://www.iconsdb.com/icons/preview/green/circle-xxl.png);
  background-repeat: no-repeat;
  background-size: 4% 100%;
  padding-left: 7%;
  font-size: 17px;
}

.circle2 {
  background-image: url(https://www.iconsdb.com/icons/preview/green/circle-xxl.png);
  background-repeat: no-repeat;
  background-size: 4% 100%;
  padding-left: 7%;
  font-size: 17px;
}

<p class="circle1">
  The additional enhancements made to the ‘Service Request Management Application’ (Phase II) increased member engagements by an additional 25%
</p>
<p class="circle2">
  The cost-optimization services reduced the hosting and licensing costs by at least 60%.
</p>

Answer 1

.circle {
        font-family: sans-serif;
        font-size: 16px;
        padding: 8px 0 0 40px;
        position: relative;
      }
      .circle:before {
        content: attr(data-value);
        width: 32px;
        height: 32px;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 50%;
        font-size: 12px;
        line-height: 1;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .low:before {
        background: blue;
      }

      .high:before {
        background: green;
      }

<p class="circle low" data-value="25%">
      The additional enhancements made to the ‘Service Request Management
      Application’ (Phase II) increased member engagements by an additional 25%
    </p>
    <p class="circle high" data-value="60%">
      The cost-optimization services reduced the hosting and licensing costs by
      at least 60%.
    </p>

Answer 2

Вот простое решение:

.circle1 {
  padding-left: 7%;
  font-size: 17px;
  margin-top:-45px;
  margin-bottom:45px;
  margin-left:10px;
}

.circle2 {
  margin-top:-45px;
  margin-bottom:45px;
  padding-left: 7%;
  font-size: 17px;
  margin-left:10px;
}

.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 17px;
  padding-top: 2.5%;
  padding-left: 1%;
  padding-right: 1%;
  color: #ffffff;
  text-align: center;
  background: blue;
}

.circle3 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 17px;
  padding-top: 2.5%;
  padding-left: 1%;
  padding-right: 1%;
  color: #ffffff;
  text-align: center;
  background: green;
}

<div>
<div class="circle">25%</div>
<p class="circle1">
  The additional enhancements made to the ‘Service Request Management Application’ (Phase II) increased member engagements by an additional 25%
</p>
<div class="circle3">60%</div>
<p class="circle2">
  The cost-optimization services reduced the hosting and licensing costs by at least 60%.
</p>
  </div>

Answer 3

Попробуйте это:

.circle1 {
  background-image: url(https://www.iconsdb.com/icons/preview/green/circle-xxl.png);
  background-repeat: no-repeat;
  background-size: 4% 100%;
  padding-left: 7%;
  font-size: 17px;
  height: 50px;
  line-height: 3;
}

.circle1 span {
  position: absolute;
  left: 20px;
  color: #fff;
}

.circle2 {
  background-image: url(https://www.iconsdb.com/icons/preview/green/circle-xxl.png);
  background-repeat: no-repeat;
  background-size: 4% 100%;
  padding-left: 7%;
  font-size: 17px;
  height: 50px;
  line-height: 3;
}

<p class="circle1">
  <span>25%</span> The additional enhancements made to the ‘Service Request Management Application’ (Phase II) increased member engagements by an additional 25%
</p>