【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%`,
相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#