【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%`,
相关推荐
slim~10 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼14 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己27 分钟前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636021 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦4 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro4 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs