效果图:
代码示例:
<div class="station-box">
<div class="img-box">
<span class="city">广州市</span>
<span class="value"
><span class="num">20</span><span class="unit">%</span></span
>
</div>
</div>
.station-box {
width: 125px;
}
.station-box .img-box {
height: 72px;
background-image: url("~@/assets/testImg/air_green.png");
background-repeat: no-repeat;
position: relative;
}
.station-box .img-box .city {
color: #ffffff;
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-75%);
font-size: 14px;
}
.station-box .img-box .value {
width: 34px;
height: 22px;
background: #ffffff;
border-radius: 2px;
font-size: 14px;
font-weight: bold;
color: #08be4b;
position: absolute;
left: 70px;
top: 50%;
transform: translate(0%, -75%);
}
.station-box .img-box .num {
margin-left: 3px;
}
.station-box .img-box .unit {
font-size: 12px;
}
参考:https://blog.csdn.net/jinzai9976/article/details/115379230