本文主要是介绍【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 的复合属性，用于一次性设置元素的背景样式。它可以包含以下多个子属性：
background-color：用于设置元素的背景颜色。background-image：用于设置元素的背景图片。background-repeat：用于设置背景图片的重复方式（如repeat,repeat-x,repeat-y,no-repeat）。background-size：用于设置背景图片的大小（如auto,cover,contain或具体的像素值）。
通过使用 background 属性，您可以同时设置这些不同的背景属性，使得控制元素的背景样式更加方便和简洁。
当使用background: url(...);来设置background-image属性时，未指定的其他背景属性将采用它们的默认值。以下是一些关于默认值的常见情况：
- background-color：如果您只设置了
background-image，而未显式设置background-color，则背景颜色将默认为透明（transparent）。 - background-repeat：默认情况下，背景图像会在水平和垂直方向上平铺（
repeat）。 - background-position：默认情况下，背景图像位于元素的左上角（
0% 0%）。 - 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%`,
这篇关于【CSS】background样式没有生效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
