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 的复合属性,用于一次性设置元素的背景样式。它可以包含以下多个子属性:
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
)。
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%`,