相对于父级大小的CSS图像变换，而不是图像大小

Question

我正在尝试使用互联网上的图片制作进度条：

我想用这些来表示我个人简历页面上的技能水平，所以我制作了一个动画片，在悬停到特定点时加载进度条： https://codepen.io/anon/pen/zdeoYZ

问题在于：当我在background-size中使用.overlay的像素设置值时，我得到了我想要的效果：它看起来好像是从左到右加载的第二个图像。

但是这样的进度条没有响应。如果我将background-size更改为100% 46px以适合容器，则会从左侧伸展而不是“加载”。

我尝试了很多变化，但是有没有办法保持这种效果，但是让进度条响应（只适合父级的宽度）？因此空的进度条始终是容器的100％，但填充的进度条是空进度条的百分比？

解决方案不一定是纯CSS，但我几乎没有JS和JQuery的经验。

Answer 1

%中的background-size尺寸指的是elemet尺寸，而不是父尺寸。因此，如果缩小元素，图像将随之缩小。

您可以使用css background-size: cover;来防止图像被拉伸。但是你必须将元素的宽度/高度设置为正确的比例，以便不剪切部分图像：

您可以通过.skill调整width: XX%元素的大小来动态设置此比率，并为高度应用padding-bottom: YY%。由于填充是相对于父width的，因此无论容器的大小如何，都将保留纵横比。

＆＃13;

＆＃13;

.container {
  width: 200px;
}
.container2 {
  width: 400px;
}
.skill, .skill2, .skill3 {
  width: 100%;
  height: 0;
  padding-bottom:9.1%;
  background: url(https://i.stack.imgur.com/082lZ.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.skill2 {
  height: 20px;
  padding-bottom:0;
}
.skill3 {
  height: 20px;
  padding-bottom:0;
}
.indicator{
  width:0%;
  height:100%;
  position:absolute;
  background: #0f0;
  background: url(https://i.stack.imgur.com/IRR3g.png);
  background-size: cover;
  background-repeat: no-repeat;
  transition: width 1s;
}

.skill:hover .indicator, .skill2:hover .indicator, .skill3:hover .indicator{
  width:100%;
}

＆＃13;

<div class="container">
  <h3>good:</h3>
  <div class="skill">
    <div class="indicator"></div>
  </div>
</div>
<div class="container2">
  <h3>good:</h3>
  <div class="skill">
    <div class="indicator"></div>
  </div>
</div>
<div class="container">
  <h3>bad:</h3>
  <div class="skill2">
    <div class="indicator"></div>
  </div>
</div>
<div class="container2">
  <div class="skill3">
    <div class="indicator"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;