[代码技巧] discuz个人空间展示积分等级制徽标

<!--{if $space[credits] >= 100 && $space[credits] < 200}-->

            <span class="number-container">

                <img src="$_G['style']['tpldir']/pic/maimai/1.png" alt="Background Image">

                <span class="number-text">{$space[credits]}</span>

            </span>

            <!--{elseif $space[credits] >= 200 && $space[credits] < 300}-->

            <span class="number-container">

                <img src="$_G['style']['tpldir']/pic/maimai/2.png" alt="Background Image">

                <span class="number-text">{$space[credits]}</span>

            </span>

            <!--{elseif $space[credits] >= 300 && $space[credits] < 400}-->

            <span class="number-container">

                <img src="$_G['style']['tpldir']/pic/maimai/3.png" alt="Background Image">

                <span class="number-text">{$space[credits]}</span>

            </span>

            <!--{elseif $space[credits] >= 400 && $space[credits] < 500}-->

            <span class="number-container">

                <img src="$_G['style']['tpldir']/pic/maimai/4.png" alt="Background Image">

                <span class="number-text">{$space[credits]}</span>

            </span>

            <!--{elseif $space[credits] >= 500 && $space[credits] < 600}-->

            <span class="number-container">

                <img src="$_G['style']['tpldir']/pic/maimai/5.png" alt="Background Image">

                <span class="number-text">{$space[credits]}</span>

            </span>

            <!--{elseif $space[credits] >= 600 && $space[credits] < 700}-->

            <span class="number-container">

                <img src="$_G['style']['tpldir']/pic/maimai/6.png" alt="Background Image">

                <span class="number-text">{$space[credits]}</span>

            </span>

            <!--{elseif $space[credits] >= 700 && $space[credits] < 800}-->

            <span class="number-container">

                <img src="$_G['style']['tpldir']/pic/maimai/7.png" alt="Background Image">

                <span class="number-text">{$space[credits]}</span>

            </span>

            <!--{elseif $space[credits] >= 800 && $space[credits] < 900}-->

            <span class="number-container">

                <img src="$_G['style']['tpldir']/pic/maimai/8.png" alt="Background Image">

                <span class="number-text">{$space[credits]}</span>

            </span>

            <!--{elseif $space[credits] >= 900 && $space[credits] < 1000}-->

            <span class="number-container">

                <img src="$_G['style']['tpldir']/pic/maimai/9.png" alt="Background Image">

                <span class="number-text">{$space[credits]}</span>

            </span>

            <!--{elseif $space[credits] >= 1000}-->

            <span class="number-container">

                <img src="$_G['style']['tpldir']/pic/maimai/10.png" alt="Background Image">

                <span class="number-text">{$space[credits]}</span>

            </span>

            <!--{/if}-->

.number-container {

display: inline-block;;/* 将span设置为行内块级元素 */

  position: relative;

  width: auto; /* 设置你希望的容器宽度 */

  height: auto; /* 高度自动适应 */

  vertical-align: middle;

}



.number-container img {

  width: auto; /* 图片宽度占满容器 */

  height: 16px !important;/* 高度自动，保持图片比例 */

  display: block; /* 去掉图片默认的外边距 */

  margin-right: 0 !important;

}



.number-container .number-text {

  position: absolute;

  top: 55%; /* 垂直居中 */

  left: 50%; /* 水平居中 */

  transform: translate(-50%, -50%);

  color: #ffffff; /* 设置数字的颜色，根据图片背景调整 */

  font-size: 8px; /* 根据图片大小和数字长度调整字体大小 */

  font-weight: bold; /* 可以让数字显示更醒目 */

  z-index: 10; /* 确保数字在图片上方 */

}