如何创建百分比图像答案

【问题标题】：How to create percentage image如何创建百分比图像
【发布时间】：2012-10-02 21:29:30
【问题描述】：

我正在学习 PHP，我只是做了一个简单的投票。它可以工作并显示每个问题的百分比（总共有 3 个问题），但我还想显示一个显示百分比的栏（所以如果第一个问题是 50% 并且栏是 100px，则栏这个问题应该是 50px）。

这是具有最终数字（百分比）的变量。

$fr = round(($f / $total) * 100); $sr = round(($s / $total) * 100); $tr = round(($t / $total) * 100);

【问题讨论】：

使用图像而不是 HTML 的任何特殊原因？
了解所有这些变量代表什么可能会有所帮助...
什么都可以，只要它设置了一个确定的栏大小，然后将其缩小到每个问题的百分比。
@Dzumla 你必须使用jquery 进行动态样式设置..

标签： php

【解决方案1】：

您要的是一张图片，但这很容易在 HTML 中完成：

<div id="container" style="width: 100px">
    <div style="background-color:#F00;width=50%">&nbsp;</div>
</div>

【讨论】：

不错的一个！我对此进行了一些修改，当然也使用了 PHP 变量，但这基本上救了我。谢谢！

【解决方案2】：

其他人已经发布了这个，但我正在编写一个示例并决定发布它

现场样例：http://jsfiddle.net/vG6jy/4/

CSS

.bar{
    height:16px;
    width:300px;
    border:1px solid #999;   
    margin:15px;
    background: #b3bead;
    background: -moz-linear-gradient(top,  #b3bead 0%, #dfe5d7 60%, #fcfff4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3bead), color-stop(60%,#dfe5d7), color-stop(100%,#fcfff4));
    background: -webkit-linear-gradient(top,  #b3bead 0%,#dfe5d7 60%,#fcfff4 100%);
    background: -o-linear-gradient(top,  #b3bead 0%,#dfe5d7 60%,#fcfff4 100%);
    background: -ms-linear-gradient(top,  #b3bead 0%,#dfe5d7 60%,#fcfff4 100%);
    background: linear-gradient(to bottom,  #b3bead 0%,#dfe5d7 60%,#fcfff4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3bead', endColorstr='#fcfff4',GradientType=0 );
}
.bar .value{
    height:100%;
    background: #87e0fd;
    background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );  
}

HTML

<div class="bar">
    <div class="value" style="width:0%;"></div>
</div>
<div class="bar">
    <div class="value" style="width:25%;"></div>
</div>
<div class="bar">
    <div class="value" style="width:50%;"></div>
</div>
<div class="bar">
    <div class="value" style="width:75%;"></div>
</div>
<div class="bar">
    <div class="value" style="width:100%;"></div>
</div>

PHP

<div class="bar">
    <div class="value" style="width:<?php echo $fr; ?>%;"></div>
</div>

【讨论】：

@MihaiIorga：既然如此，为什么不简单地使用 CSS3 动画呢？ :)
@MihaiIorga：很好！ PS - IE 不缺乏对 CSS3 动画的支持吗？我喜欢这个 jQuery 方法
@Dutchie432 那是纯 JS，这里是 CSS3：jsfiddle.net/IorgaMihai/MCnMU，但是
正确 - 该评论针对 Madara Uchiha。 nice 是针对你的。

【解决方案3】：

你把事情复杂化了。

<div class="meter">
    <span class="percentage" style="width: 25%"></span>
</div>


.meter { width: 150px; border 2px solid #666; }
.percentage { background-color: #00FF00; }

【讨论】：

所以把它内联。没有人阻止他。