【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%`,
相关推荐
web打印社区2 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗2 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长3 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅4 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_4 小时前
Chrome开发者工具
前端·chrome
YiHanXii4 小时前
this 输出题
前端·javascript·1024程序员节
楊无好4 小时前
React中ref
前端·react.js
程琬清君4 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1004 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔664 小时前
flutter实现web端实现效果
前端·flutter