Question

所以，我有一个进度条。颜色简单，效果很好。当我放入图像时，它会从上到下填充，而不是从底部到顶部，我不知道如何修复它。帮助

Answer 1

选项1：

.load-form, .load-line{
  vertical-align:bottom
}

选项2：

.load-line{
  position:absolute;
  bottom:0;
}

Answer 2

做这种事情需要绝对定位和背景定位。添加这些

#load-form .load-line {
    position: absolute;
    background: url('http://la2portal.us.lt/status_online_full.png') no-repeat bottom;

$(document).ready(function(e) {

    var maxonline = 6000;
    var currentonline = $(this).find('.asd').html();
    var percent = currentonline/maxonline*100;
    if(percent > 100)
        percent = 100;
    if(currentonline > maxonline) {
        alert('Its full');
        return;
    }
    $('.load-line').animate({height: percent+'%' },500);
    $('.percent').html(percent+'%')

});

#load-form {
    width: 137px;
    height: 87px;
    background: url('http://la2portal.us.lt/status_online_simple.png');
    margin: 100px auto 0px;
    position: relative;
}

#load-form .load-line {
    position: absolute;
    background: url('http://la2portal.us.lt/status_online_full.png') no-repeat bottom;
    height: 0px;
    width: 137px;
    bottom: 0px;
    max-height: 87px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load-form">
    <div class="load-line"></div>
</div>
<center>
    <div class="percent"></div>
    <div class="asd">2000</div>
</center>

正如其他人所说，center已被弃用，不鼓励使用它。（不得不包括那些可能会在这里结束并且没有看到评论的人。）

Answer 3

我稍微操纵了你的代码，请检查JSFiddle。

不确定这是否可行，这是一种解决方法。

我所做的是先将值设置为0，然后再设置为100 - %。

我希望这会有所帮助。

Answer 4

我尝试了一种粗糙的方式，在顶部添加另一个灰色层，使其尺寸缩小。这有助于产生绿色层实际从底部填满的错觉。看一看！ http://jsfiddle.net/Lgnk5mnz/2/

在div封面类中添加HTML：

<div id="load-form">
    <div class="load-line"></div>
    <div class="cover"></div>
</div>
<center>
    <div class="percent"></div>
    <div class="asd">2000</div>
</center>

CSS为封面类添加css：

#load-form {
    width:137px;
    height:87px;
    background:url('http://la2portal.us.lt/status_online_simple.png');
    margin:100px auto 0;
    position:relative;
}
#load-form .load-line {
    background:url('http://la2portal.us.lt/status_online_full.png');
    height:87px;
    width:137px;
    bottom:4px;
    left:6px;
    max-height:87px;
}
#load-form .cover {
    width:137px;
    height:87px;
    background:url('http://la2portal.us.lt/status_online_simple.png');
    margin:-87px auto 0;
    position:relative;
}

最后，为封面类设置动画并删除负载线的动画。 $（document）.ready（function（e）{

    var maxonline = 6000;
    var currentonline = $(this).find('.asd').html();
    var percent = currentonline / maxonline * 100;
    if (percent > 100) percent = 100;
    if (currentonline > maxonline) {
        alert('Its full');
        return;
    }
    $('.cover').animate({
        height: 100 - percent + '%'
    }, 500);
    $('.percent').html(percent + '%')

});

Answer 5

你去http://jsfiddle.net/5x275eh1/。我只改变了你的CSS

    #load-form { width:137px; height:87px; background:url('http://la2portal.us.lt/status_online_simple.png'); margin:100px auto 0;  position:relative; bottom:4px; left:6px;} 
    #load-form .load-line { background:url('http://la2portal.us.lt/status_online_full.png'); height:0; width:137px;  max-height:87px;}
.load-line {
    transform: rotateX(180deg);
position:absolute;
    bottom:0px; left:0px;
}

进度条填补从下到上

5 个答案: