• css_背景属性所踩的坑

    目录

    需求介绍

    需求
    • 当前有循环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{
    background: url('../../../static/images/weibo.png');
  }
}
.kuaishou{
  &::before{
    background: url('../../../static/images/kuaishou.png');
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
    问题

    发现除了抖音媒体的图片能够正常显示，其余媒体的图片显示不正常；

    • 正常样子

      • 在这里插入图片描述

    • 现在样子

      • 在这里插入图片描述
    原因
    • 虽然background-szie不能通过符合属性添加，但是 background复合属性会覆盖backgroun-size属性！！！
    • background-size属性不会覆盖background属性值！！！
    • 下面三个类中重新设置了background，导致li中的背景图片大小的设置被覆盖了！！！
    改正实现
    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');
    background-size: cover;
  }
}
.weibo{
  &::before{
    background: url('../../../static/images/weibo.png');
    background-size: cover;
  }
}
.kuaishou{
  &::before{
    background: url('../../../static/images/kuaishou.png');
    background-size: cover;
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    背景属性

    既然踩坑了，就再复习一下背景属性知识点吧！！

    背景颜色
    • background-color:默认transparent
    背景图片
    • background-image:none | url(路经) ; 默认none
    背景平铺
    • background-repeat:repeat | no-repeat | repeat-x repeat-y; 默认repeat
    背景定位
    • background-position: x y;
    • 单位：
      • [1]百分比
        • –左上角为0% 0%
        • –右下角为100% 100%
        • 若只写一个另一个默认为50%
          • background-position:50%; 在盒子中背景图片绝对居中(等同于center)
      • [2]方位名词(top bottom left right center)
        • 只写一个，另一个默认为center
      • [3]px单位
    背景滚动
    • background-attachment
      • 默认scroll
      • scroll | fixed
    背景图片大小

    • background-size

    • 属性值

      • 属性值单位–px
        • eg:设置两个值时：background-size: 100px 300px;
          • 第一个值为宽, 第二个值为高，图片比例可能失调；
        • eg:只设置1个值时：background-size: 100px;
          • 值为宽度；
          • 高度根据宽度值进行等比例缩放
      • 属性值单位–百分比
        • eg:设置两个值时：background-size: 100% 100%;
          • 第一个为宽, 第二个为高, 按照父盒子(本盒子)的高宽进行比例计算；
        • eg:只设置1个值时：background-size: 100%;
          • 只设置一个值时, 百分比是根据父盒子的宽度进行计算, 然后根据图片的比例进行等比例缩放 ；
      • 属性值–cover
        • 进行等比例缩放，至最小的一边将盒子完全盖住；
        • 可能会有一部分图片内容展示不出来；
      • 属性值–contain（盒子包含背景图片）
        • 进行等比例缩放，至最大的一边将盒子完全盖住；
        • 盒子可能会有一部分空白的部分

    • 注：背景图片不能撑大 盒子（也就是说若是盒子没有设置宽高，则可能造成背景图片不显示）

    复合属性
    • background: color image repeat position attachment;
      • 没有固定顺序；
      • background-size没有设置在复合属性中，只能单独设置！

    案例

    案例1
    • div {
  background: rgba(255, 0, 0, 0.5)
          url('./images/abcd.jpg')  center no-repeat fixed;
  background-size: 200px 200px;
      }

      • 1
      • 2
      • 3
      • 4
      • 5
    • <body>
    <div>div>
  body>

      • 1
      • 2
      • 3

    • 如上代码

      • 我们看不到背景图片
      • 原因：div盒子没有设置宽高,默认高度为0(背景图片并不能 撑大 盒子)；
  • 相关阅读:
    MMDeploy部署实战系列【第四章】：onnx，tensorrt模型推理
    MySQL常用指令整理
    挖矿是什么意思？矿工都做了什么？
    怎样寻找服务器大文件的方法
    计算机毕业设计之java+javaweb的物业管理系统
    oracle mysql索引区别
    typescript: 类型“NodeListOf＜xxx＞”必须具有返回迭代器的 “[Symbol.iterator]()“ 方法。ts(2488)
    azure devops工具实践分析
    一个高性能、低内存文件上传流.Net组件
    MINA架构DEMO
  • 原文地址：https://blog.csdn.net/qq_43260366/article/details/126161666