如何实现CSS条形图渐变背景宽度匹配父容器宽度（元素宽度小于容器时保持渐变比例）

我明白你的需求了：你希望每个条形（.graph）的渐变背景是参照父容器（.graphContainer）的宽度来渲染的，只有当条形宽度达到父容器100%时，才会显示出饱和度更高的红色区域，而短条形只显示渐变的左侧部分，不会让渐变随自身宽度等比例缩放。

当前的问题在于，默认情况下背景渐变是基于元素自身的宽度计算的，所以当你缩小.graph的宽度时，渐变也会跟着压缩，导致短条形也能看到深红区域。下面是可行的解决方案：

核心思路 #

把渐变背景**转移到父容器.graphContainer**上，让.graph元素作为一个“可视窗口”，只显示父容器背景的左侧对应宽度的部分。这样渐变的基准就是父容器的宽度，完全符合你的需求。

修改后的代码 #

CSS部分

.container { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  background-color: black; 
  padding: 10px; 
}
.graphContainer { 
  height: 50px; 
  width: 100%; 
  /* 把渐变背景放在父容器，作为基准 */
  background: linear-gradient( 
    to right, 
    rgba(24, 24, 24, 0) 0%, 
    rgba(232, 35, 35, 0.92) 85%, 
    rgba(232, 35, 35, 1) 92% 
  );
  position: relative;
  overflow: hidden;
}
.graph { 
  height: 100%; 
  /* 用和外层容器一致的黑色作为遮挡色，隐藏父容器渐变的右侧部分 */
  background-color: black;
  position: absolute;
  right: 0; /* 从右侧开始遮挡，只保留左侧对应宽度的渐变可见 */
}
#graph1 { width: 0%; } /* 不遮挡，显示完整渐变（对应原100%宽度的条形） */
#graph2 { width: 50%; } /* 遮挡右侧50%，只显示左侧50%的渐变 */
#graph3 { width: 75%; } /* 遮挡右侧75%，只显示左侧25%的渐变 */

HTML部分（无需修改）

<div class='container'>
  <div class='graphContainer'>
    <div class='graph' id='graph1'></div>
  </div>
  <div class='graphContainer'>
    <div class='graph' id='graph2'></div>
  </div>
  <div class='graphContainer'>
    <div class='graph' id='graph3'></div>
  </div>
</div>

原理说明 #

1. 父容器.graphContainer承载完整的渐变背景，这个渐变的宽度固定为父容器的100%，不会随子元素宽度变化。
2. .graph元素设置为绝对定位并靠右对齐，用黑色背景遮挡父容器的渐变区域：
   • 当.graph宽度为0时，完全不遮挡，显示完整的渐变（对应最宽的条形）
   • 当.graph宽度为50%时，遮挡右侧一半区域，只显示左侧50%的渐变内容
   • 以此类推，短条形只会显示渐变的左侧透明到浅红部分，只有占满父容器的条形才会显示到最后的深红区域。

这个方案完全不需要知道父容器的具体宽度数值，完美适配响应式场景。

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