【CSS】background样式没有生效

1. 问题背景

设置了background-size:"100% 100%" 没有生效。

css 复制代码
background: `url(${this.getUrl(this.state.scenelist.length > 1 ? item.bannerLongUrl : item.bannerShortUrl)})`,\
background-size:"100% 100%"

2.分析

2.1 结论

由于图片需要远程获取,如果先执行 background-size,等到图片获取了再执行backgroud,backgroud里面的background-size:auto会覆盖单独设置的background-size: "100% 100%",会使样式失效。

2.2 原理

background 是一个 CSS 的复合属性,用于一次性设置元素的背景样式。它可以包含以下多个子属性:

  1. background-color:用于设置元素的背景颜色。
  2. background-image:用于设置元素的背景图片。
  3. background-repeat :用于设置背景图片的重复方式(如 repeat, repeat-x, repeat-y, no-repeat)。
  4. background-size :用于设置背景图片的大小(如 auto, cover, contain 或具体的像素值)。

通过使用 background 属性,您可以同时设置这些不同的背景属性,使得控制元素的背景样式更加方便和简洁。

当使用background: url(...);来设置background-image属性时,未指定的其他背景属性将采用它们的默认值。以下是一些关于默认值的常见情况:

  1. background-color :如果您只设置了background-image,而未显式设置background-color,则背景颜色将默认为透明(transparent)。
  2. background-repeat :默认情况下,背景图像会在水平和垂直方向上平铺(repeat)。
  3. background-position :默认情况下,背景图像位于元素的左上角(0% 0%)。
  4. background-size :默认情况下,背景图像大小是原始大小(auto)。
css 复制代码
background: `url(${this.getUrl(this.state.scenelist.length > 1 ? item.bannerLongUrl : item.bannerShortUrl)})`,\
background-size:"100% 100%"

代码等同于

css 复制代码
// backgroud
background-image:`url(${getS3NetworkUr1( this.state.scenelist.length wew 1 ? item.bannerLongUrl : item.bannerShortUr1)})`
background-color:`transparent`
background-repeat:`repeat`
background-size:`auto`// 背景图像大小是原始大小

background-size: "100% 100%",

3.解决方案:不要既采用复合属性,又使用子属性

3.1 子属性分开设置,用到什么设置什么(推荐)

css 复制代码
backgroundImage: `url(${getUrl(scenelist.length > 1 ? item.bannerLongUrl : item.bannerShortUrl)})`,
backgroundSize: "100% 100%",

3.2 只设置复合属性

css 复制代码
background: `url(${this.getUrl(this.state.scenelist.length > 1 ? item.bannerLongUrl : item.bannerShortUrl)}) 100% 100%`,
相关推荐
excel9 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼10 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping10 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙11 小时前
[译] Composition in CSS
前端·css
白水清风11 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端11 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧11 小时前
Promise 的使用
前端·javascript
NBtab12 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端