CSS background-image 属性

最新推荐文章于 2024-07-25 10:18:55 发布

Windyluna

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量616

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/Windyluna/article/details/126049273

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
代码示例：

<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;
}