css设置不同的活动状态

前端程序媛Ying

于 2022-11-20 13:54:24 发布

阅读量238

点赞数

分类专栏： web前端文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_62323730/article/details/127948265

版权

web前端专栏收录该内容

55 篇文章 0 订阅

订阅专栏

比如：有进行中是蓝色底，有已截止是灰色底

可以写两个类名，用交集选择器

“进行中”三个字通过js换成“已截止”

html


                <!-- 活动状态 -->
                <div class="active off">进行中</div>

css

.main .item .pic .active {
  position: absolute;
  top: -0.10666667rem;
  left: 0.4rem;
  width: 1.81333333rem;
  height: 0.77333333rem;
  background-image: url(../images/status_active.png);
  background-size: contain;
  font-size: 0.32rem;
  color: #FFF;
  text-align: center;
  line-height: 0.66666667rem;
}
.main .item .pic .active.off {
  background-image: url(../images/status_default.png);
}