仅填充总宽度的 50% 的背景颜色答案

【问题标题】：fill background color only 50% of it total width仅填充总宽度的 50% 的背景颜色
【发布时间】：2013-09-05 22:50:03
【问题描述】：

是否可以在 CSS 中仅将背景颜色填充为其总宽度的 50%？

我正在尝试制作一个进度条，我需要根据进度的"%" 填充背景颜色。

请指点。

【问题讨论】：

另一种做法：在DIV的左边缘或右边缘定义一个边框，并将边框宽度设置为div的宽度。颜色边框和背景不同。对不同完成率的概括留给读者... ;-)
嵌入包含 1 行和 2 个单元格的表格，将单元格设置为不同的背景颜色，并为单元格分配可用常量的动态百分比。
为什么要投反对票....大国责任重大

标签： jquery html css

【解决方案1】：

有多种不同的方法可以实现这一点。

伪元素方法：

<div class="progress"></div>

EXAMPLE HERE

.progress {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    position: relative;
}
.progress:after {
    content: '\A';
    position: absolute;
    background: black;
    top: 0; bottom: 0;
    left: 0; 
    width: 50%; /* Specify the width.. */
}

线性梯度方法：

这种方法的优点是您可以指定多种不同的颜色。

EXAMPLE HERE

.progress {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  background: linear-gradient(to right, black 50%, white 50%);
}

没有 JS/JQUERY 的动画

这些方法中的任何一种都可以使用纯 CSS 进行动画处理：

EXAMPLE HERE

.progress:after {
    /* other styling .. */
    width: 50%; /* End width.. */
    -webkit-animation: filler 2s ease-in-out;
    -moz-animation: filler 2s ease-in-out;
    animation: filler 2s ease-in-out;
}

@-webkit-keyframes filler {
    0% {
        width: 0;
    }
}

过渡方法

EXAMPLE HERE

.progress:after {
    /* other styling.. */
    width: 0;
    transition: all 2s;
    -webkit-transition: all 2s;
}
.progress:hover:after {
    width: 50%;
}

【讨论】：

谢谢，我想知道是否可以仅使用 1 个 div 使用背景颜色
jsfiddle.net/mjEDY/1我做这个小提琴只是为了好玩，以你的为基础
对于渐变方法，“左”不应该是“右”吗？还是单字值也可以接受？
@Pyromonk - 很好，更新了 - 谢谢！由于某种原因，left 在 7 年前使用 -webkit 供应商前缀时似乎是有效的。
@JoshCrozier，它似乎仍然有效（至少对于 -webkit），但 MDN 仅列出以“to”开头的值。感谢您如此迅速地回复此问题并提供非常有帮助的回复！

【解决方案2】：

是的，通过使用渐变的停止，即使只有一个 div 也是可能的；

HTML

<div></div>

CSS

div {

  width:400px;
  height:400px;


  background: -webkit-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: -moz-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: -o-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: -ms-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: linear-gradient(left, #00ff00 50%, #ff0000 50%);
}

【讨论】：

【解决方案3】：

我使用 Josh C 的回答做了一个进度条动画：http://jsfiddle.net/mjEDY/1/

HTML：

<div class="prog">
    <div id="filler" class="filler"></div>
</div>

CSS：

.prog {
    width:200px;
    height:50px;
    border:1px solid black;
}
.filler {
    width:0%;
    height:50px;
    background-color:black;
}

JS：

var stepSize = 50;
setTimeout((function() {
    var filler = document.getElementById("filler"),
        percentage = 0;
    return function progress() {
        filler.style.width = percentage + "%";
        percentage +=1;
        if (percentage <= 100) {
            setTimeout(progress, stepSize);
        }
    }

}()), stepSize);

它使用了一些高级的 javascript 技巧（用于动画的闭包和 setTimeouts），但你明白了。稍微转动一下，你就可以使用它来根据你想要的任何东西创建一个进度条，也不需要 js 插件:)

【讨论】：

是否可以在边框上使用它，而我的意思是没有内部 div？
@ErtürkÖztürk 不确定我理解您想要什么，但您可以将内部 div 设置为您想要的任何样式，与外部 div 相同。如果您希望它没有填充物，请不要设置任何背景颜色，而是可以只设置边框。

【解决方案4】：

您可以使用 100% 高度的绝对 div 并使用 javascript 更改其宽度。

看起来很酷：这是jsFiddle

【讨论】：

【解决方案5】：

您还可以使用包装器 div 将 CSS3 的背景属性用于进度条。

var stepSize = 50;
setTimeout((function() {
    var wrapper = document.getElementById("imageWrapper"),
        image = document.getElementById("preview"),
        percentage = 0;
    return function progress() {
        wrapper.style.backgroundSize = percentage + "% 100%";
        image.innerHTML = percentage + "%";
        percentage +=1;
        if(percentage <= 100){
            setTimeout(progress, stepSize);
            if(percentage == 100) image.style.opacity = 1;
        }
    }
    
}()), stepSize);

div#imageWrapper{
	width:100px;
	height:120px;
	background: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==') no-repeat;
	background-size:0% 100%;
	background-position:0 100px;
}
div#preview{
	width:100px;
	height:100px;
    background: url('http://sugarbird.skyauction.com/content/qart_140775b.jpg');
	background-size:cover;
	opacity: 0.5;
}

<div id="imageWrapper">
    <div id="preview"></div>
</div>

【讨论】：