【CSS】background样式没有生效

1. 问题背景

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

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）。

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

代码等同于

// 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 子属性分开设置，用到什么设置什么（推荐）

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

3.2 只设置复合属性

background: `url(${this.getUrl(this.state.scenelist.length > 1 ? item.bannerLongUrl : item.bannerShortUrl)}) 100% 100%`,