显示背景颜色的百分比栏

Question

例如，如果我有一个包含两列和两行的表：

Col1       Percentage
50            50% 
70            70%

如何填充百分比列，颜色代表COl1的值？像这样：

Answer 1

您可以使用线性渐变，其中两个停靠点紧跟在一起：

＆＃13;

＆＃13;

.percentageFill{
    height:30px;

    background: -webkit-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:    -moz-linear-gradient(left, #efe3af 75%, #ffffff 75%);
    background:     -ms-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:      -o-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:         linear-gradient(to right, #efe3af 75%,#ffffff 75%);

    border:1px solid black;
}

＆＃13;

<div class='percentageFill'>75%</div>

＆＃13;

＆＃13;

＆＃13;

请记住，许多浏览器/版本需要linear-gradient的供应商前缀。

Answer 2

您可以使用不同大小的background-image（基于您的值）和一些Javascript / jQuery的组合来使其动态化。

注意 ：linear-gradient实际上是background-image而不是background-color。因此，我们可以利用background-size和background-repeat属性。在下面的例子中，我使用了一个虚拟渐变，颜色相同。这使它看起来简单平整。您可以使用复杂的渐变来让酒吧充满活力。

运行以下代码段以观看演示 ：

＆＃13;

＆＃13;

/* A little bit of jQuery / Javascript */

// Pick up each relevant cell, and
// Assign the text to its background-size property

$("td.percent").each(function() {
    var s = $(this).text() + ' 100%';
    // This will get 's' as 'n% 100%'. We have to only change the width, 
    // height remains 100%. We assign this 's' to the css.
    $(this).css({"background-size": s});
});

＆＃13;

/* CSS */

* { box-sizing: border-box; }
table {
    table-layout: fixed;
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
}
col.small { width: 30%; }
col.big { width: 70%; }
th, td {
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 4px;
}

/* this is the style which does the work */
td.percent {
    text-align: center;
    background-color: #eee;
    /* dummy gradient with same from and to colours */
    /* you can use any gradient to jazz it up */
    background-image: linear-gradient(to right, #3399dd, #3399dd);
    /* because gradients are images, we can use background-size property */
    background-size: 1% 100%;         /* initial width of 1% and height 100%*/
    background-repeat: no-repeat;     /* this is important to restrict the gradient */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Your table with second column containing percent values -->

<table>
    <col class="small" /><col class="big" />
    <thead><tr><th>Title</th><th>Value</th></tr></thead>
    <tbody>
        <tr><td>One</td><td class="percent">65%</td></tr>
        <tr><td>Two</td><td class="percent">90%</td></tr>
        <tr><td>Three</td><td class="percent">20%</td></tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

如果你想用它检查不同的百分比值，也是一个小提琴： http://jsfiddle.net/abhitalks/xh734aej/2/

---

有一项建议，除了attr之外，在width等其他CSS属性上实施content时会有{{1}}。这样就可以仅使用没有Javascript的CSS动态制作停止大小。

参考 ：http://www.w3.org/TR/css3-values/#attr-value

Answer 3

按照乔治的回答， 我在动态样式中使用javascript（需要jQuery）创建了一个函数。 如果设置setFill函数的第三个参数，则还会在背景上应用调色板。

希望可能有用。

/**
 * Fill the CSS Background programmatically.
 * 
 * @param String el The element selector
 * @param int perc
 * @param bool use_color
 * @returns void
 */
function setFill(el, perc, use_color) {

  var color;

  if (use_color !== true) {
    color = '#f5f5f5';
  } else {
    if (perc < 20) {
      color = '#F8D7CF';
    } else if (perc < 40) {
      color = '#FCE5D3';
    } else if (perc < 60) {
      color = '#F9EED6';
    } else if (perc < 80) {
      color = '#C4E4E0';
    } else if (perc <= 100) {
      color = '#C3CCD0';
    }
  }

  $(el)
    .css('background', '-webkit-linear-gradient(right, ' + color + ' ' + perc + '%,#ffffff ' + perc + '%)')
    .css('background', '-moz-linear-gradient(right, ' + color + ' ' + perc + '%,#ffffff ' + perc + '%)')
    .css('background', '-ms-linear-gradient(right, ' + color + ' ' + perc + '%,#ffffff ' + perc + '%)')
    .css('background', '-o-linear-gradient(right, ' + color + ' ' + perc + '%,#ffffff ' + perc + '%)')
    .css('background', 'linear-gradient(to left, ' + color + ' ' + perc + '%,#ffffff ' + perc + '%)');
}

$('.percentageFill').each(function(i, e){ 
  setFill(e, $(e).data('percentage'), true); 
});

.percentageFill{
    height:30px;
    border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='percentageFill' data-percentage="5">5%</div>
<div class='percentageFill' data-percentage="30">30%</div>
<div class='percentageFill' data-percentage="55">55%</div>
<div class='percentageFill' data-percentage="70">70%</div>
<div class='percentageFill' data-percentage="98">98%</div>