CSS圖像變換相對於母公司的大小，而不是圖像尺寸

Question

我試圖用這個形象在互聯網上找到做一個進度條：

我想用這些來表示的技能水平我的個人簡歷頁面上，所以我做了加載懸停進度條到某一點的動畫： https://codepen.io/anon/pen/zdeoYZ

這裏的問題：當我在.overlay使用像素的設定值進行background-size，我得到的效果我想要：它看起來好像從左側加載第二個圖像向右。

但是這樣的進度條沒有響應。如果我將background-size更改爲100% 46px以適應容器，它將從左側延伸而不是「加載」。

我已經嘗試了很多變化，但有沒有一種方法來保持這種效果，但使進度條響應（適應它的寬度只有父母大小）？所以空的進度條始終是容器的100％，但填充的進度條是空進度條的百分比？

該解決方案不一定是純粹的CSS，但我沒有經驗的JS和JQuery。

Answer 1

在background-size中的%尺寸指的是元素大小不是父大小。所以如果你縮小你的元素，圖像會隨之縮小。

您可以使用css background-size: cover;來防止圖像被拉伸。但必須設置的元素向右比的寬度/高度，以不剪裁圖像的部分：

您可以通過width: XX%和用於高度.skill元件上漿動態地設置該比值施加padding-bottom: YY% 。由於填充與母體width有關，因此無論容器的尺寸如何，縱橫比都將保留。

.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%; 
 
}

<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>