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

乖女子@@@

2024-05-10 帮助1人

需求介绍

需求

当前有循环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');
  }
}

问题

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

正常样子
现在样子

原因

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

背景属性

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

背景颜色

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

```
<body>
    <div></div>
  </body>
```
如上代码
- 我们看不到背景图片
- 原因：div盒子没有设置宽高,默认高度为0(背景图片并不能撑大盒子)；

这篇好文章是转载于：学新通技术网

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

需求介绍

需求

实现

问题

原因

改正实现

背景属性

背景颜色

背景图片

背景平铺

背景定位

背景滚动

背景图片大小

复合属性

案例

案例1

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开