我正在尝试为iOS设置一个百分比栏,所以我无法使用<input type="range" />
,然后我这样做:
<div id="detailedPercentage">
<div id="percLabel">70%</div>
</div>
使用此CSS,其中perc.png
为1px
,其中rgb(136, 153, 170)
为彩色:
#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%的盒子。我该怎么做才能纠正这个问题?
答案 0 :(得分:1)
几个月前,我有同样的css问题(尽管与IOS没有关系)并在这里提出了问题:
我也问过这个相关的问题:
How widely supported are background-size and background-origin?
也许这些会有所帮助。
要查看解决方案是否有效(在不完整的错误页面上),请查看this table.
中的“出价x询问”栏(左起第9列)答案 1 :(得分:1)
您可以使用堆叠元素制作进度表。
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;
}