css_背景属性踩坑_background-size会被background复合属性覆盖

需求介绍

需求

• 当前有循环li元素；
• 每个li元素代表 抖音、微博、小红书、快手四个媒体中的一个；
• 不同媒体在li元素中右上角logo不同；

实现

• 不同媒体设置不同类名；

• 不同类名添加伪元素，设置不同背景图片；

• li{
       
   &::before{
       
      content:'';
      position: absolute;
      background: url('../../../static/images/douyin.png');
      width: 36px;
      height: 36px;
      background-size: cover;
      right: 0;
      top:0;
    }
  }
  .xiaohongshu{
       
    &::before{
       
      background: url('../../../static/images/xiaohongshu.png');
    }
  }
  .weibo{
       
    &::before