CSS无background-image元素如何调整背景大小实现局部背景色

background-size 仅对元素的 background-image 生效，你设置的 backgroundColor 是纯色填充，不属于背景图像范畴，不会被该属性控制，因此样式不生效。

方案1：同色渐变模拟可控尺寸纯色背景 #

纯色本身无法被 background-size 控制，但渐变属于背景图像类型，将纯色替换为起止色相同的渐变，即可通过背景相关属性控制色块尺寸、位置，代码改动最小：

<Flex overflowX="hidden" justifyContent={"center"}>
  <Image
    // 移除原backgroundColor属性，改用同色渐变作为背景图
    backgroundImage="linear-gradient(cyan, cyan)"
    backgroundSize="75% 50%"
    backgroundRepeat="no-repeat"
    // 可根据需求调整色块位置，例如靠下显示设为center bottom
    backgroundPosition="center center"
    src={heroIllustration.src}
    width={{ base: "580px", lg: "897px" }}
    minWidth={{ base: "580px", lg: "897px" }}
    height={{ base: "518px", lg: "795px" }}
    alt=""
  />
</Flex>

如果你的PNG素材带透明通道，透明区域会正常透出下方的青色块，符合背景展示逻辑。

方案2：嵌套分层容器实现 #

如果需要更灵活的控制、避免背景属性的兼容问题，可以通过两层元素叠加实现：父容器固定和图片一致的尺寸，内部放绝对定位的青色色块，再把图片放在上层覆盖即可：

<Flex overflowX="hidden" justifyContent={"center"}>
  <Box
    position="relative"
    width={{ base: "580px", lg: "897px" }}
    height={{ base: "518px", lg: "795px" }}
    display="flex"
    alignItems="center"
    justifyContent="center"
  >
    {/* 独立控制青色块的尺寸、位置 */}
    <Box
      backgroundColor="cyan"
      width="75%"
      height="50%"
      position="absolute"
    />
    <Image
      src={heroIllustration.src}
      width="100%"
      height="100%"
      alt=""
      position="relative"
      zIndex={1}
    />
  </Box>
</Flex>

该方案逻辑直观，调整色块大小、偏移、圆角等属性都不需要记忆背景相关的规则，适配复杂需求更方便。

内容的提问来源于stack exchange，提问作者goplay