1.未显示标签，因为CSS类未正确定位。
1.分隔符需要在温度计内部，所以我将.marker元素移到了#progress div内部。
1.移动“36”和指针以匹配进度条。
1.使用不同的方法而不是mix-blend-mode将颜色更改为反向。
下面是更新后的代码：

body * {
      box-sizing: border-box;
    }
    
    body {
      background-color: blue;
    }
    
    #actual {
      font-size: 36px;
      color: white;
    }
    
    .actualPointer {
      position: absolute;
      left: 35.3%;
      top: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    @media only screen and (max-width: 1440px) {
      .actualPointer {
        left: 35%;
      }
    }
    
    #thermometer {
      border: 4px solid grey;
      width: 100%;
      height: 40px;
      background: darkblue;
      border-radius: 50vh 50vh 50vh 50vh;
      float: left;
      overflow: hidden;
      margin-top: 70px;
    }
    
    #progress {
      height: 100%;
      background: white;
    }
    
    .marker1 {
      border-right: 2px solid white;
      text-align: right;
      padding: 2px;
      float: left;
      margin: 0;
      color: rgb(255, 255, 255) !important;
      z-index: 9;
    }
    
    .marker2 {
      border-right: 2px solid white;
      text-align: right;
      padding: 2px;
      float: left;
      margin: 0;
      color: white;
    }
    
    .marker {
      text-align: right;
      padding: 2px;
      float: left;
      /* margin: 0; */
      color: white;
    }
    
    .zero {
      margin: 0;
      color: white;
    }
    
    .labelRow {
      display: flex;
      align-items: center;
      flex-direction: row;
      height: 100%;
      position: relative;
    }
    
    .labelRow::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 36%;
      height: 100%;
      background-color: rgb(255, 255, 255)
    }
    
    .label {
      text-align: center;
      padding: 2px;
      margin: 0;
      color: rgb(255, 255, 255);
      mix-blend-mode: difference;
      @media only screen and (max-width: 640px) {
        width: 50%;
        text-align: center;
      }
    }
    
    .text {
      display: block;
      font-weight: bold;
    }
    
    .text-label {
      font-size: 20px;
      letter-spacing: 1px;
      padding-right: 34px;
    }
    
    #pointer {
      border-bottom: 10px solid white;
      border-left: 6px solid rgba(0, 0, 0, 0);
      border-right: 6px solid rgba(0, 0, 0, 0);
      content: "";
      display: inline-block;
      height: 0;
      vertical-align: top;
      width: 0;
      transform: rotate(180deg);
    }
    
    .range-display {
      position: relative;
    }

个字符

我解决了你的问题：

body * {
  box-sizing: border-box;
}

body {
  background-color: blue;
}

#actual {
  font-size: 36px;
  color: white;
}

.actualPointer {
  position: absolute;
  left: 35.3%;
  top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media only screen and (max-width: 1440px) {
  .actualPointer {
    left: 35%;
  }
}

#thermometer {
  border: 4px solid grey;
  width: 100%;
  height: 40px;
  background: darkblue;
  border-radius: 50vh 50vh 50vh 50vh;
  float: left;
  overflow: hidden;
  margin-top: 70px;
}

#progress {
  height: 100%;
  background: white;
}

.marker1 {
  border-right: 2px solid white;
  text-align: right;
  padding: 2px;
  float: left;
  margin: 0;
  color: rgb(255, 255, 255) !important;
  z-index: 9;
}

.marker2 {
  border-right: 2px solid white;
  text-align: right;
  padding: 2px;
  float: left;
  margin: 0;
  color: white;
}

.marker {
  text-align: right;
  padding: 2px;
  float: left;
  /* margin: 0; */
  color: white;
}

.zero {
  margin: 0;
  color: white;
}

.labelRow {
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 100%;
  position: relative;
}

.labelRow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 36%;
  height: 100%;
  background-color: rgb(255, 255, 255)
}

.label {
  text-align: center;
  padding: 2px;
  margin: 0;
  color: rgb(255, 255, 255);
  mix-blend-mode: difference;
  @media only screen and (max-width: 640px) {
    width: 50%;
    text-align: center;
  }
}

.text {
  display: block;
  font-weight: bold;
}

.text-label {
  font-size: 20px;
  letter-spacing: 1px;
  padding-right: 34px;
}

#pointer {
  border-bottom: 10px solid white;
  border-left: 6px solid rgba(0, 0, 0, 0);
  border-right: 6px solid rgba(0, 0, 0, 0);
  content: "";
  display: inline-block;
  height: 0;
  vertical-align: top;
  width: 0;
  transform: rotate(180deg);
}

.range-display {
  position: relative;
}

个字符

通过添加样本标签、在温度计内放置分隔线、调整“36”和指针的位置以与进度条对齐，以及更新混合模式和颜色以获得更好的可见性和清晰的对比度。

<!DOCTYPE html>
<html lang="en">

<head>
<style>
body * {
  box-sizing: border-box;
}

body {
  background-color: blue;
}

#actual {
  position: relative;
  font-size: 40px;
  color: white;
  left: 36%; /* Adjust positioning */
  margin-top: -20px; /* To align with progress bar */
}

#thermometer {
  position: relative;
  border: 4px solid grey;
  width: 100%;
  height: 40px;
  background: darkblue;
  border-radius: 50vh 50vh 50vh 50vh;
  overflow: hidden;
  margin-top: 20px; /* Create space between progress bar and labels */
}

#progress {
  position: absolute;
  height: 100%;
  background: white;
  z-index: 333;
  width: 36%; /* Adjust initial progress width */
}

.divider {
  height: 100%;
  border-right: 1px solid white; /* Adjust divider styling */
  position: absolute;
}

.labelRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Arrange labels evenly */
  padding: 0 4%; /* Adjust padding for better alignment */
  color: white;
}

.label {
  text-align: center;
  margin: 0;
  color: white;
}

.text {
  display: block;
  font-weight: bold;
}

#pointer {
  position: relative;
  border-bottom: 10px solid white;
  border-left: 6px solid rgba(0, 0, 0, 0);
  border-right: 6px solid rgba(0, 0, 0, 0);
  content: "";
  display: inline-block;
  height: 0;
  vertical-align: top;
  width: 0;
  transform: rotate(180deg);
  left: 36%; /* Adjust positioning */
  margin-top: -5px; /* To align with progress bar */
}
 </style>
 </head>

 <body>
 <div id="actual">36</div>
 <div id="pointer"></div>
 <div id="thermometer">
  <div id="progress"></div>
  <div class="divider" style="left: 12.5%;"></div> <!-- Adjust left position 
  for dividers -->
  <div class="divider" style="left: 25%;"></div>
  <div class="divider" style="left: 37.5%;"></div>
  <div class="divider" style="left: 50%;"></div>
  <div class="divider" style="left: 62.5%;"></div>
  <div class="divider" style="left: 75%;"></div>
  <div class="labelRow">
  <span class="label">0</span>
  <span class="label">20</span>
  <span class="label">40</span>
  <span class="label">60</span>
  <span class="label">80</span>
  <span class="label">100</span>
</div>

字符集

嗨，运行下面的代码片段，我希望这将解决你的问题。我已经改变了z索引属性和一些文本对齐。

<html lang="en">
    
    <head>
      <style>
        body * {
          box-sizing: border-box;
        }
    
        body {
          background-color: blue;
        }
    
        #actual {
          font-size: 24px;
          color: white;
          position: absolute;
          left: 36.5%;
          top: 34%; /* Adjust the top position as needed */
          transform: translate(-50%, -50%);
        }
    
        #thermometer {
          border: 4px solid grey;
          width: 100%;
          height: 40px;
          background: darkblue;
          border-radius: 50vh;
          overflow: hidden;
          position: relative;
        }
    
        #progress {
          height: 100%;
          background: white;
          width: 36%; /* Adjust the width as needed */
          position: absolute;
          z-index: 1; /* Ensure the progress bar is above markers */
        }
    
        .marker {
          border-right: 2px solid black;
          text-align: right;
          padding: 2px;
          float: left;
          margin: 0;
          color: white;
          position: absolute;
          height: 100%;
          z-index: 2; /* Ensure markers are above progress bar */
        }
    
        .markerText {
          text-align: center;
          padding: 2px;
          float: left;
          margin: 0;
          bottom: 0px; /* Adjust the bottom position as needed */
          color: red;
          position: absolute;
          top: 20%;
        }
    
        .labelRow {
          display: flex;
          flex-direction: row;
          position: absolute;
          width: 100%;
          top: 50%; /* Adjust the top position as needed */
          transform: translateY(-50%);
        }
    
        .label {
          text-align: center;
          padding: 2px;
          margin: 0;
          color: black;
          position: relative;
          width: 25%;
        }
    
        .text {
          display: block;
          font-weight: bold;
        }
    
        #pointer {
          border-bottom: 10px solid black;
          border-left: 6px solid rgba(0, 0, 0, 0);
          border-right: 6px solid rgba(0, 0, 0, 0);
          content: "";
          display: inline-block;
          height: 0;
          vertical-align: top;
          width: 0;
          transform: rotate(180deg);
          position: absolute;
          left: 36%;
          top: 50px; /* Adjust the top position as needed */
        }
      </style>
    </head>
    
    <body>
      <div id="actual">35</div>
      <div id="pointer"></div>
      <div id="thermometer">
        <div id="progress"></div>
        <div class="marker" style="left:-0.4%;">
          <div class="markerText">0</div>
        </div>
        <div class="marker" style="left: 25%; ">
          <div class="markerText">25</div>
        </div>
        <div class="marker" style="left: 50%;">
          <div class="markerText">50</div>
        </div>
        <div class="marker" style="left:75%">
          <div class="markerText">75</div>
        </div>
        <div class="marker" style="width: 100%;left:99%">
          <div class="markerText">100</div>
        </div>
        <div class="labelRow">
          <div class="label">
            <span class="text">None</span>
          </div>
          <div class="label">
            <span class="text">Low</span>
          </div>
          <div class="label">
            <span class="text">Medium</span>
          </div>
          <div class="label">
            <span class="text">High</span>
          </div>
        </div>
      </div>
    </body>
    
    </html>

字符集

您的标签未显示，因为您未将其渲染到Html中。在温度计div之后添加一个具有类labelRow的div元素。在其中，添加4个具有类标签和文本0，25，50和100的div元素。这将在温度计下方创建一行标签。并使用flex属性均匀对齐标签。

做了一些修改代码。只是复制和粘贴这个.......

<html lang="en">

<head>
  <style>
    :root {
      /* change progress width and see the result. remember #acutal text needs to be changed using javascript. for now you can change manually*/
      --progressWidth: 36%;
      --progressHeight: 40px;
    }

    body * {
      box-sizing: border-box;
    }

    body {
      background-color: blue;
    }

    #actual {
      font-size: 30px;
      color: white;
    }

    #thermometerContainer {
      /* Give the width of thermometer as your wish*/
      width: 90%;
      /* place thermometer at center to see clearly. you can remove it if you wish*/
      margin: auto;
      position: relative;
      padding: 3rem 0;
    }

    #pointerContainer {
      position: absolute;
      top: 0;
      left: var(--progressWidth);
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center
    }

    #thermometer {
      border: 4px solid grey;
      width: 100%;
      height: var(--progressHeight);
      background: darkblue;
      border-radius: 50vh 50vh 50vh 50vh;
      /* overflow: hidden; */
    }

    #progress {
      width: var(--progressWidth);
      height: 100%;
      background: white;
      z-index: 333;
      border-radius: 15px 0 0 15px;
    }

    #rangeDisplay {
      width: 100%;
      position: relative;
      left: 0;
      bottom: 0;
    }

    .marker {
      position: absolute;
      top: 2px;
      color: white;
      transform: translateX(-50%);
    }

    #labelRow {
      display: flex;
      flex-direction: row;
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
      mix-blend-mode: difference;
    }

    .label {
      position: relative;
      flex: 1;
      text-align: center;
      padding: 2px;
      margin: 0;
      z-index: 2;

      @media only screen and (max-width : 640px) {
        width: 50%;
        text-align: center;
      }
    }

    /* for displaying | (marker line) */
    .label:not(:last-child)::before {
      content: "";
      width: 2px;
      height: calc(var(--progressHeight) - 8px);
      background-color: white;
      position: absolute;
      left: calc(100% - 4px);
      top: -5px;
    }

    .label .text {
      display: block;
      color: white;
    }

    .text {
      display: block;
      font-weight: bold;
    }

    #pointer {
      border-bottom: 10px solid white;
      border-left: 6px solid rgba(0, 0, 0, 0);
      border-right: 6px solid rgba(0, 0, 0, 0);
      content: "";
      display: inline-block;
      height: 0;
      vertical-align: top;
      width: 0;
      transform: rotate(180deg);
    }
  </style>
</head>

<body>
  <div id="thermometerContainer">
    <div id="thermometer">
      <div id="pointerContainer">
        <div id="actual">36</div>
        <div id="pointer"></div>
      </div>
      <div id="progress">
        <div id="labelRow">
          <div class="label">
            <span class="text">None</span>
          </div>
          <div class="label">
            <span class="text">Low</span>
          </div>
          <div class="label">
            <span class="text">Medium</span>
          </div>
          <div class="label">
            <span class="text">High</span>
          </div>
        </div>
      </div>
    </div>
    <div id="rangeDisplay">
      <div class="marker" style="left: 25%;">
        <span class="text">25</span>
      </div>
      <div class="marker" style="left: 50%;">
        <span class="text">50</span>
      </div>
      <div class="marker" style="left: 75%;">
        <span class="text">75</span>
      </div>
      <div class="marker" style="left: 100%;">
        <span class="text">100</span>
      </div>
    </div>
  </div>
</body>

</html>

字符集

要实现所需的模型并解决上述调整，您可以对HTML和CSS代码进行以下调整：
移动温度计内的标签。调整“36”和指针的位置。反转颜色。下面是代码的更新版本：

<html lang="en">

<head>
  <style>
    body * {
      box-sizing: border-box;
    }

    body {
      background-color: blue;
      margin: 0;
    }

    #actual {
      font-size: 40px;
      color: white;
      position: relative;
      left: 36%;
      margin-top: -30px; /* Adjust as needed */
    }

    #pointer {
      border-top: 10px solid white;
      border-left: 6px solid rgba(0, 0, 0, 0);
      border-right: 6px solid rgba(0, 0, 0, 0);
      content: "";
      display: inline-block;
      height: 0;
      vertical-align: bottom;
      width: 0;
      position: relative;
      left: 36%;
      bottom: 10px; /* Adjust as needed */
      transform: rotate(180deg);
    }

    #thermometer {
      border: 4px solid grey;
      width: 100%;
      height: 40px;
      background: darkblue;
      border-radius: 50vh 50vh 50vh 50vh;
      overflow: hidden;
      position: relative;
      margin-top: 20px; /* Adjust as needed */
    }

    #progress {
      height: 100%;
      background: white;
      width: 36%;
    }

    #labelRow {
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
    }

    .label {
      text-align: center;
      padding: 2px;
      margin: 0;
      color: rgb(0, 0, 0);
    }

    .text {
      display: block;
      font-weight: bold;
    }

    #rangeDisplay {
      display: flex;
      justify-content: space-between;
      margin-top: 10px; /* Adjust as needed */
    }

    .marker {
      border-right: 2px solid white;
      text-align: right;
      padding: 2px;
      color: white;
    }
  </style>
</head>

<body>
  <div id="actual">36</div>
  <div id="pointer"></div>
  <div id="thermometer">
    <div id="progress"></div>
    <div id="labelRow">
      <div class="label">
        <span class="text">None</span>
      </div>
      <div class="label">
        <span class="text">Low</span>
      </div>
      <div class="label">
        <span class="text">Medium</span>
      </div>
      <div class="label">
        <span class="text">High</span>
      </div>
    </div>
  </div>
  <div id="rangeDisplay">
    <div class="marker">
      <span class="text">25</span>
    </div>
    <div class="marker">
      <span class="text">50</span>
    </div>
    <div class="marker">
      <span class="text">75</span>
    </div>
    <div class="marker">
      <span class="text">100</span>
    </div>
  </div>
</body>

</html>

字符集
根据需要调整边距-顶部、底部和其他值以进行微调。此代码应可帮助您实现所需的布局。

*,
      *::after,
      *::before {
        margin: 0;
        padding: 0;
      }
      body {
        box-sizing: border-box;
        background-color: blue;
        padding: 0 50px;
      }
      .thermo-meter {
        position: relative;
        margin-top: 120px;
      }
      #actual {
        position: absolute;
        font-size: 40px;
        color: white;
        top: -60px;
      }

      #thermometer {
        border: 4px solid grey;
        width: 100%;
        height: 40px;
        background: darkblue;
        border-radius: 50vh 50vh 50vh 50vh;
        /* float: left; */
        overflow: hidden;
        position: relative;
      }

      #labelRow {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        color: #fff;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 2;
        mix-blend-mode: difference;
        width: 100%;
      }

      #progress {
        height: 100%;
        background: white;
        z-index: 1;
        position: absolute;
        width: 0;
        max-width: 100%;
        min-width: 0;
        /* border-radius: 5px; */
      }

      #rangeDisplay {
        color: #fff;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        font-size: 16px;
        font-weight: bold;
      }

      /* .marker {
        border-right: 2px solid white;
        text-align: right;
        padding: 2px;
        float: left;
        margin: 0;
        color: white;
      } */

      /* .labelRow {
        display: flex;
        flex-direction: row;
      } */

      .label {
        text-align: center;
        padding: 2px;
        margin: 0;
        color: rgb(255, 255, 255);
        mix-blend-mode: difference;
        border-left: 2px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        /* @media only screen and (max-width: 640px) {
          width: 50%;
          text-align: center;
        } */
      }
      .label:first-child {
        border-left: 0;
      }

      .text {
        display: block;
        font-weight: bold;
      }

      #pointer {
        border-bottom: 10px solid white;
        border-left: 6px solid rgba(0, 0, 0, 0);
        border-right: 6px solid rgba(0, 0, 0, 0);
        content: "";
        display: inline-block;
        height: 0;
        vertical-align: top;
        width: 0;
        transform: rotate(180deg);
        position: absolute;
        top: -18px;
      }

个字符