問題背景尺寸

我試圖讓iOS版百分比吧，所以我不能用<input type="range" />，然後我做這樣的：問題背景尺寸

<div id="detailedPercentage"> 
    <div id="percLabel">70%</div> 
</div>

有了這個CSS，其中perc.png是rgb(136, 153, 170)着色的1px：

#detailedPercentage { 
    height: 32px; 
    width: 286px; 
    margin-right: 15px; 

    border: 1px solid #222; 
    background-image: url(../images/perc.png); 
    background-color: rgb(242, 242, 242); 
    background-repeat: repeat; 
    background-size: 70%; 
} 

#percLabel { 
    height: 32px; 
    width: 100%; 
    color: #222; 
    text-align: center; 
    font-family: Georgia; 
    line-height: 32px; 
    font-size: 19px; 
    background-color: transparent; 
}

但背景填充框的100％。我該怎麼做才能糾正這個問題？

來源

2011-11-06 Nathan Campos

我認爲，'背景repeat'的問題是什麼。 'background-size'似乎在操縱圖像本身。 http://jsfiddle.net/bxedY/1/ –

只是刪除了'背景repeat'並沒有什麼改變 –

你可以使用'背景position'代替：http://jsfiddle.net/bxedY/2/（注意，我沒有一個精確大小的背景圖片，所以忽略了實際值。） –

您可以使用堆疊元素，使進度表。

HTML - 請注意percDisplay元素。

<div id="detailedPercentage"> 
    <div id="percDisplay"></div> 
    <div id="percLabel">70%</div> 
</div>

CSS - 注意position性能。

#detailedPercentage { 
    height: 32px; 
    width: 480px; 
    margin: 15px; 
    border: 1px solid #222; 
    background-color: rgb(242, 242, 242); 
    position: relative; 
} 
#percDisplay { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    background-color: rgb(136, 153, 170); 
    width: 70%; 
    height: 32px; 
} 
#percLabel { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    height: 32px; 
    width: 100%; 
    color: black; 
    text-align: center; 
    font-family: Georgia; 
    line-height: 32px; 
    font-size: 19px; 
    background-color: transparent; 
}

http://jsfiddle.net/bxedY/4/

來源

2011-11-06 13:46:48